Question

JQuery 遍历表中的每行数据 , 然后进行数据绑定

JQuery 遍历表中的每行数据, 读取第4个td中的内容, 然后 拼接字符串 然后把 拼接的 字符串 赋给 第1个表格中的 img 的 src

$("#tbl2 tr").load(function()
{
var v = $(this).children().eq(3).text();
$(this).children().eq(0).children().eq(0).attr("src" ,"img/"+v+".gif");
});

代码什么地方错了啊

求高人指点

Answer 1

关键是 jQuery.each()

不知道你 table 什么结构，我写的代码需要 tbl2 和 tb1 中的 tr 个数要对应。

$(function() {
    // table2 下查找每行中的第四个 td，idx 为 0,1,2,3...
    $("#tbl2 tr td:nth-child(4)").each(function(idx) {
        // table1 下查找第 idx 个 tr，再查找 img
        $("#tbl1 tr:eq(" + idx +")").find("img")
        // 替换 src
        .attr("src", "img/" + $(this).text() + ".gif");
    });
});

<table border="1" id="tbl1">
<tr><td><img src="" /></td></tr> <!-- 执行后 <img src="img/1111.gif"> -->
<tr><td><img src="" /></td></tr> <!-- 执行后 <img src="img/2222.gif"> -->
<tr><td><img src="" /></td></tr> <!-- 执行后 <img src="img/3333.gif"> -->
<tr><td><img src="" /></td></tr> <!-- 执行后 <img src="img/4444.gif"> -->
<tr><td><img src="" /></td></tr> <!-- 执行后 <img src="img/5555.gif"> -->
</table>
    
<table border="1" id="tbl2">
<tr><td>1</td><td>2</td><td>3</td><td>1111</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>2222</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>3333</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4444</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>5555</td></tr>
</table>