3

我已经创建了一个表，可以在检查复选框时使用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 时一次添加 2 行。：/ 为什么这样？（抱歉，评论太长了。）

4

3 回答 3

1

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

function updateIndex() 
{ 
    $("#status_table tr").each(function(){
      $( this ).find( "td" ).first().html( $(this).index() + 1 );
    });
}
于 2013-04-19T05:09:27.123 回答
0

如果您想从正在递增的计数器中跳过 <th> 行：

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")。

于 2014-03-18T18:07:04.727 回答
0

尝试这样的事情，小提琴

        $(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();
                }

            });
        })
于 2013-04-19T05:32:22.987 回答