如何使用jQuery向上或向下移动附加行
问题描述:
因此,基本上,如果行已经存在于DOM中,那么它们上下移动行可以很好地工作,但行使用jquery附加行并尝试向上和向下移动它不起作用。如何使用jQuery向上或向下移动附加行
$(".addmore").on('click',function(){
\t count=$('table tr').length;
\t var data="<tr><td>"+count+"</td>";
data+="<td><a class='down' href='#'>Down</a> <a class='up' href='#'>Up</a></td>";
$('table').append(data);
});
$(".up,.down").click(function() {
var $element = this;
var row = $($element).parents("tr:first");
if($(this).is('.up')){
row.insertBefore(row.prev());
}
else{
row.insertAfter(row.next());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class='addmore'>+ Add Row</button>
\t \t \t \t \t \t
<table>
<thead>
<tr> \t \t \t \t \t \t \t
<th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a class="down" href="#">Down</a> <a class="up" href="#">UP</a></td>
</tr>
</tbody>
</table> \t \t \t \t \t \t \t \t
请运行上面的例子,因为它会解释清楚。
在这个例子中,你可以看到行ID是完美地上下移动,因为它已经存在于表中,但是如果我添加更多的行然后移动它们不起作用。
答
如果您使用以下内容,即使是新添加的元素也可以使用。
$("table").on("click",".up,.down", function {});
$(".addmore").on('click',function(){
\t count=$('table tr').length;
\t var data="<tr><td>"+count+"</td>";
data+="<td><a class='down' href='#'>Down</a> <a class='up' href='#'>Up</a></td>";
$('table').append(data);
});
$("table").on("click",".up,.down", function() {
var row = $(this).parents("tr:first");
if($(this).is('.up')){
row.insertBefore(row.prev());
}
else{
row.insertAfter(row.next());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class='addmore'>+ Add Row</button>
\t \t \t \t \t \t
<table>
<thead>
<tr> \t \t \t \t \t \t \t
<th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a class="down" href="#">Down</a> <a class="up" href="#">UP</a></td>
</tr>
</tbody>
</table>
哇简单的东西,我生气了,想这么多东西。感谢它的作品。 :) – Phoenix
'$(“。up,.down”)有什么问题。click(function(){' – Phoenix
问题是$(“。up,.down”)是生成jQuery对象,然后指定一个点击值,但是,我们希望选择我们的表格,然后选择下面的所有元素,我们将过滤.up和.down,这样我们就可以容纳新元素。 – Neil