Question

我试图通过整个表格循环使用.length通过javascript为每个表行添加一个数字，并列出每行的数字。我一直在努力工作，但我一直都在努力。请帮忙！这是我的表：

<table class="mytable">
    <thead>
        <tr>
            <th>#</th>
            <th>First</th>
            <th>Last</th>
        </tr>
    </thead>
    <tbody>
        <tr class="person">
            <td class="number"></td>
            <td>Bill</td>
            <td>Sims</td>
        </tr>
        <tr class="person">
            <td class="number"></td>
            <td>Jenny</td>
            <td>Jackson</td>
        </tr>
        <tr class="person">
            <td class="number"></td>
            <td>Milo</td>
            <td>Resa</td>
        </tr>
    </tbody>
</table>`

理想情况下，它看起来像这个1 Bill Sims等等。

Answer 1

试试这个

$(function(){
    $('.mytable tr').each(function(i){
        $(this).find('td:first').text(i); // or $(this).find('td.number').text(i);
  //Use iterator's index argument 
    });
});

或

$(function(){
    $('.mytable tr td.number').text(function(){
       return $(this).closest('tr').index() + 1; // get the parent tr's index() add 1 to get the #
    });
});

Fiddle

Answer 2

我打赌你从其他帖子中得到了答案，但我更喜欢在通过孩子选择父母时使用父（直接父母而不是递归旅行）而不是使用最近< / em>和孩子 over 找到选择父母的直接子女时（没有遍历子女的后代），因为td始终是tr的直接子女。

示例：

$('table tr td.number').each(function(){ $(this).text($(this).parent().index()+1); // you could use collection (like the next example) if you have one td with class 'number' per each tr });

OR：

$('table tr').each(function(i){ $(this).children('.number:first').text(i+1); });

此致

Answer 3

试试这个

$('table tr').each(function() {
   var index = $(this).index();
    $('.number', this).text(index +1);
});

<强> Check Fiddle

向表中添加数字

3 个答案:

Fiddle