jQuery表行中的每个循环

时间:2012-05-03 13:04:28

标签: javascript jquery html-table each tablerow

  

可能重复:
  How to iterate a table rows with JQuery and access some cell values?

我有类似的东西:

<table id="tblOne">
            <tbody>
                <tr>
                    <td>
                        <table id="tblTwo">
                            <tbody>
                                <tr>
                                    <td>
                                        Items
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Prod
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 1
                    </td>
                </tr>
                <tr>
                    <td>
                        Item 2
                    </td>
                </tr>
            </tbody>
        </table>

我已经编写了jQuery来循环遍历每个tr:

$('#tblOne tr').each(function() {...code...});

但问题是它循环通过“tblTwo”的“tr”也是我不想要的。 任何人都可以建议解决这个问题吗?

3 个答案:

答案 0 :(得分:179)

在jQuery中只需使用

$('#tblOne > tbody  > tr').each(function() {...code...});

使用直接子选择器(>),您将走过直接后代(而不是所有后代)


VanillaJS

中,您可以使用document.querySelectorAll()并使用forEach()

遍历各行
[].forEach.call(document.querySelectorAll('#tblOne > tbody  > tr'), function(tr) {
    /* console.log(tr); */
});

答案 1 :(得分:54)

只是一个建议:

我建议使用DOM表格实现,它非常简单易用,你真的不需要jQuery来完成这项任务。

var table = document.getElementById('tblOne');

var rowLength = table.rows.length;

for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  var cellLength = row.cells.length;
  for(var y=0; y<cellLength; y+=1){
    var cell = row.cells[y];

    //do something with every cell here
  }
}

答案 2 :(得分:18)

使用immediate children selector >

$('#tblOne > tbody  > tr')
  

描述:选择由“child”指定的所有直接子元素   “父母”指定的元素。