jquery使用.after（）

Question

var stop_index = 1;

$('.add_stop').click(function(){
        tr = '#stop' + stop_index
        $(tr).after('<tr id="stop'+ stop_index + '"><td>'+ stop_index +'</td></tr>');
        stop_index ++;
});

这是代码（在表格中添加一行）。

但是，它不起作用。

如果我编写这样的代码，它就可以了。

$('#stop1').after('<tr id="stop'+ stop_index + '"><td>'+ stop_index +'</td></tr>');

有什么问题？

Answer 1

查看您的代码，您需要一个<tr id="stop1">元素才能生效，然后下一个元素也会添加ID stop1。也许你应该提前增加值

var stop_index = 1;

$('.add_stop').click(function(){
        tr = '#stop' + stop_index
        stop_index ++;
        $(tr).after('<tr id="stop'+ stop_index + '"><td>'+ stop_index +'</td></tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="stop1"><td>1</td></tr>
</table>
<button class="add_stop">
Add
</button>

增加id是一个反模式，你应该考虑是否需要它们。如果您只是尝试添加行

，只需添加到现有列表的末尾就更简单了

var index = 1;
$('.add_stop').click(function(){      
    $('table').append('<tr><td>'+ ++index +'</td></tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td></tr>
</table>
<button class="add_stop">
Add
</button>

Answer 2

问题是你在创建新行之后递增stop_index，而不是在它之前。因此，当您添加第一个新行时，它会有id=stop1，而不是id=stop2。下次尝试添加新行时，您将尝试在#stop2之后添加它，但该行不存在，因此没有任何反应。

移动线

stop_index++;

向上一行。

$('.add_stop').click(function(){
    tr = '#stop' + stop_index
    stop_index ++;
    $(tr).after('<tr id="stop'+ stop_index + '"><td>'+ stop_index +'</td></tr>');
});

Answer 3

你可以这样尝试

$('.add_stop').click(function(){
   tr = '#stop' + stop_index;
   //to generate uniq id you need to plus it bore adding new tr
   let newTrIDIndex = stop_index + 1;
   $(tr).after('<tr id="stop'+ newTrIDIndex + '"><td>'+ newTrIDIndex +'</td></tr>');
    stop_index = newTrIDIndex ;
});

如果你不做加号那么你用旧索引创建tr，这意味着你结束了两个具有相同id的tr。所以要避免在创建tr之前创建索引值。

Answer 4

你会用

$("#" + id + ).closest( "tr" ).after( ... );

或者您也可以使用

$( ... ).insertAfter( $("#" + id ).closest( "tr" ) );

基本相同。

有关详细信息，请参阅http://api.jquery.com/after/。