如何使用jquery设置表格单元格值

Question

我想通过遍历它们来设置表的所有单元格的值.理想情况下,我想访问像数组一样的Html表$("#tbl")[row][col]="5"

这不起作用.

$(document).ready(function() {
    for (var row = 0; row < 3; row++) {
        for (var col = 0; col < 3; col++) {
            $("#tbl").children().children()[row].children()[col].append("sdfasdf");
        }
    }
});

这有效,但我不知道为什么!

1. 我不理解$("#tbl").children().children()为什么需要第二个孩子
2. 为什么第3个孩子不是第2个孩子(2).

3. 为什么innerHTML不是一个函数,即innerHTML()

   $(document).ready(function() {
       for (var row = 0; row < 3; row++) {
           for (var col = 0; col < 3; col++) {
               $("#tbl").children().children()[row].children[col].innerHTML = "H!";
           }
       }
   });
   

Answer 1

如果您只想迭代表中的每个单元格,则以下任一操作都可以:

$('#tbl td').each(function ()
{
    var $cell = $(this);
    // do something with the current <td>
});

// or,

$('#tbl tr').each(function ()
{
    var $row = $(this);
    $row.children().each(function ()
    {
        var $cell = $(this);
        // do something with the current <tr> and <td>
    });
});

如果你想像数组一样访问表,你将不得不自己构建一个数组:

var arr = $('#tbl > tbody > tr').map(function ()
{
    return $(this).children().map(function ()
    {
        return $(this);
    });
});

但是,jQuery不公开API,因此您将(曾经)能够执行简单的赋值,如arr[row][col] = 5;.使用上面的数组,这将工作:

arr[row][col].text(5);

演示

编辑

(1)我不理解$("#tbl").children().children()为什么需要第二个孩子

因为jQuery的.children()函数只返回一个元素的直接后代的集合,而不是所有的后代(例如,孩子+孙子+ ...).

(2)为什么第3个孩子不是第2个孩子(2).

因为当您使用数组表示法来访问jQuery集合的元素时,您将获得底层DOM元素,而不是jQuery对象.使用.eq(i)而不是[i]:

$("#tbl").children().children().eq(row).children().eq(col).append("sdfasdf");

(3)为什么innerHTML不是函数,即innerHTML()

在问题#2的答案中,...children()[col]返回一个DOM元素,而不是一个jQuery对象.大多数浏览器都支持DOM element.innerHTML属性.

当使用.eq(i)而不是[i]如上所述时,使用.html()jQuery函数.