jQuery如何动态地向表格中添加索引号

Question

我已经创建了一个表并可以使用jQuery在选中复选框时添加和删除行。我的问题是，如何动态地在第一列添加一个索引号？

我的表格：

   <div>
       <table class="config" id="status_table">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Output Status</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Output Type</th>
                    <th>Output Number</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td >1</td>
                    <td ><p id="type_row_one"></p></td>
                    <td ><p id="number_row_one"></p></td>
                    <td>
                        <img class="image" id = "off" style="margin-left:20px" src="static/OffLamp-icon.png" >
                        <img class="image" id = "on" style="margin-left:20px" src="static/OnLamp-icon.png" >
                    </td>
                </tr>
            </tbody>       
       </table>                     
    </div>

我的jQuery:

$('#outputCB').change(function(){
                   if($('#outputCB_1').is(':checked')){
                       $('#status_table tr:last').after('<tr id="output_newrow_1"><td>index+1</td><td>testing</td></tr>');}
                    else{
                        $('#status_table').find("#output_newrow_1").remove();
                    }

                });

因此，我希望它不是简单的"index+1"，而是能够从上一个索引号递增，并在删除行时递减。我该如何处理？在JavaScript中可以分配一个变量并执行++1或--1吗？我真的不知道从哪里开始......

更新:
我尝试了这个但失败了：

  var index=1;
           $('#outputCB').change(function(){
               if($('#outputCB_1' ||'#outputCB_2').is(':checked')){
                   index++;
                   $('#status_table tr:last').after('<tr id="output_newrow_'+index+'"><td>'+index+'</td><td id="type_row_'+index+'">type_row_'+index+'</td><td id="num_row_'+index+'">num row '+index+'</td><td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td></tr>');
                   }
                else{
                    index--;
                    $('#status_table').find("#output_newrow_'+index+'").remove();
                }

            });

当再次选中 #outputCB_1 时，它永远不会删除任何内容，并且每次添加两行。:/ 为什么呢？（抱歉，这个评论太长了。）

- yvonnezoe

---

找不到最后一个tr？ - Jai

Answer 1

每次添加或删除行时，只需调用此代码。

function updateIndex() 
{ 
    $("#status_table tr").each(function(){
      $( this ).find( "td" ).first().html( $(this).index() + 1 );
    });
}

- ripu1581

---

@Jai 这是tr，然后我通过对tr的子元素进行筛选，在第一个td中输入值。 - ripu1581

$(this) 对应于当前循环的 tr，find('td').first() 返回该行中的第一个 td ，并将该行的 index 设置为该 td 的值。 - jpmorin

谢谢大家。你们的意思是我添加/删除后，只需要在下面放置updateIndex()吗？至于函数，我会将其包含在javascript中，我需要初始化索引或在某个地方创建变量吗？ - yvonnezoe

@yvonnezoe 是的，那就是我想表达的意思。 - ripu1581

问题：有没有一种方法可以忽略<tr><th>行？这段代码不仅计算<tr><td>，而且还计算<th>。有什么想法吗？ - Eugene Kardash

Answer 2

尝试这样做：

FIDDLE

        $(function(){
            $('#outputCB').change(function () {
                if (this.checked) {
                    var index = $('#status_table tbody tr').length + 1
                    $('#status_table tr:last').after('<tr id="output_newrow_1"><td>'+index+'</td><td>testing</td></tr>');
                } else {
                    $('#status_table').find("#output_newrow_1").remove();
                }

            });
        })

- rajesh kakawat

---

谢谢@qais和@rajesh！但我不可能为所有输出制作一个函数...（我有96个输出，还有其他类似的东西...）我现在考虑使用文本输入而不是复选框...所以我将有一个添加和一个删除按钮。这样会更容易吗？我还需要发布用户输入的数字以显示。我通过为每个分配ID，获取值并在表格上显示来简单地完成了它。有更简单的方法吗？ - yvonnezoe

你可以使用类而不是ID，在单个函数中完成此编程任务。 - rajesh kakawat

抱歉，我不理解 :( - yvonnezoe

Answer 3

如果您想跳过计数器被递增的行：

var th_rows_counter = 0;
var all_rows_counter = 0;
$("#icontable tr").each(function() {
    all_rows_counter++;
    $( this ).find( "td" ).first().html( all_rows_counter - th_rows_counter ); // replace <td> content with the counter
    $( this ).find( "th" ).first().each(function(){th_rows_counter++;}); // increment the counter of <th> rows
});

或者，如果要跳过具有不同 CSS 样式的 <td>，可以使用 not() 函数：$( this ).find( "td" ).not(".otherstyle")。

- Eugene Kardash