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");
        }
    }
});

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

我不理解$（“＃tbl”）。children（） .children（）为什么需要第二个孩子
为什么第3个孩子不是第2个孩子的功能，即儿童（）。

为什么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);

<强> Demo

修改

（1）我不理解$（“＃tbl”）。children（）。children（）为什么需要第二个孩子

因为jQuery的.children()函数只返回元素的立即后代的集合，而不是所有后代（例如儿童+孙子+ ......）。

（2）为什么第3个孩子不是第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 property。

如上所述，使用.eq(i)代替[i]时，请使用.html() jQuery函数。

Answer 2

您可以尝试使用此选择器$('#myTable tr:nth-child('+row+') td:nth-child('+col'+)').html("sdfasdf");

Answer 3

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

Answer 4

如果您只想为所有单元格指定值，请尝试以下方法：

$(document).ready(function () {
    $("#tbl td").append("sdfasdf");
});

如果要将单元格提取为二维数组：

$(document).ready(function () {
    var rowsNcells = $.map($("#tbl tr"),
    function(el, ind){
        var row = [];
        $("td", el).each(function(){
            row.push(el);
        });
        return row;
    });
});

然后在代码中的某个地方。

$(rowNcells[1][2]).text("Something");

Answer 5

你是说这个意思吗？

<table>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>1</td><td>2</td></tr>
</table>

var tr = 1;
$('table tr').each(function(){
    var td = 1;
    $(this).find('td').each(function(){
        $(this).append(' | TR : ' + tr + ' TD : ' + td );
         td++;
    });
    tr++;
});

现场演示：http://jsfiddle.net/8xFFH/

遍历所有TD，以便您知道自己所处的位置。如果它是静态附加，您也可以使用$('table tr td').append()。

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

5 个答案:

修改