我有以下表格布局:
<table border="1" id="staff">
<tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th></tr>
<tr id="1"><td>1</td><td>Futter</td><td>Anders</td<td>Germany</td></tr>
<tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td<td>Sweden</td></tr>
<tr id="5"><td>3</td><td>Centro</td><td>Francisco</td<td>Mexico</td></tr>
<tr id="8"><td>4</td><td>Handel</td><td>Roland</td<td>Austria</td></tr>
</table>
现在,按下删除按钮后,一个jquery函数将tr id发送到处理php页面,成功后php &mysql删除操作,处理PHP页面向表页面发送回调消息。jquery函数然后从html表中删除结果行:
$("body").on("click",".del",function(event){
event.preventDefault();
var table= 'staff';
var id = $(this).closest('tr').attr('id');
$.post(url,
{
table: tbl,
trid: id,
},function(data){
var callback_msg = data.return_msg;
if(callback_msg=='delete'){
$('#'+id).remove();
}
});
});
因此,如果用户希望删除id为5的第3行,删除该行后,S/N列保持不变,如下所示:
<table border="1" id="staff">
<tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th></tr>
<tr id="1"><td>1</td><td>Futter</td><td>Anders</td<td>Germany</td></tr>
<tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td<td>Sweden</td></tr>
<tr id="8"><td>4</td><td>Handel</td><td>Roland</td<td>Austria</td></tr>
</table>
你可以看到序列号列现在是1,2,4(序列号3被删除)。
我如何在我的jquery代码中包含一个函数,以便删除后它将重新排序序列号为1,2,3(即最后一行的序列号将成为3)?
[注:删除可能在中间行。所以。last()选择器在这种情况下可能不起作用]
删除行后,循环遍历它的兄弟行,更新它们的第一个单元格:
var callback_msg = data.return_msg;
if(callback_msg=='delete'){
var row = $(document.getElementById(id)); // Or continue to use the invalid ID selector: '#'+id
var siblings = row.siblings();
row.remove();
siblings.each(function(index) {
$(this).children('td').first().text(index + 1);
});
}
实时示例(我必须为每行添加一个.del
元素,我假设您正在某处这样做…):
$("body").on("click",".del",function(event){
event.preventDefault();
var table= 'staff';
var row = $(this).closest('tr');
var id = row.attr("id");
alert("Deleting id #" + id);
setTimeout(function() { // Simulating ajax
var siblings = row.siblings();
row.remove();
siblings.each(function(index) {
$(this).children().first().text(index);
});
}, 100);
});
.del {
cursor: pointer;
}
<table border="1" id="staff">
<tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th><th></th></tr>
<tr id="1"><td>1</td><td>Futter</td><td>Anders</td><td>Germany</td><td class="del">X</td></tr>
<tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td><td>Sweden</td><td class="del">X</td></tr>
<tr id="8"><td>3</td><td>Handel</td><td>Roland</td><td>Austria</td><td class="del">X</td></tr>
<tr id="9"><td>4</td><td>JLR</td><td>Jag</td><td>UK</td><td class="del">X</td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
从评论来看,你似乎不确定上面的内容放在哪里。下面是上下文:
$("body").on("click",".del",function(event){
event.preventDefault();
var table= 'staff';
var id = $(this).closest('tr').attr('id');
$.post(url,
{
table: tbl,
trid: id,
},function(data){
var callback_msg = data.return_msg; //
if(callback_msg=='delete'){ //
var row = $(document.getElementById(id)); // Changed
var siblings = row.siblings(); // code
row.remove(); // is
siblings.each(function(index) { // here
$(this).children('td').first().text(index + 1); //
}); //
} //
});
});
虽然实际上,这将更有效,并避免由id
选择:
$("body").on("click",".del",function(event){
event.preventDefault();
var table= 'staff';
var row = $(this).closest('tr'); // *
var id = row.attr('id'); // *
$.post(url,
{
table: tbl,
trid: id,
},function(data){
var callback_msg = data.return_msg; // *
if(callback_msg=='delete'){ // *
var siblings = row.siblings(); // *
row.remove(); // *
siblings.each(function(index) { // *
$(this).children('td').first().text(index + 1); // *
}); // *
} // *
});
});
注意当id
是数字时使用'#'+id
:以数字开头的ID选择器(如#1
, #42
等)无效。jQuery单独支持它们(例如,$("#1")
可以工作,但$("#1 span")
不行),作为它优化它们的副产品,在幕后使用getElementById
。这是一种未记录的行为,从理论上讲,它随时都可能改变。(在事实上,如果他们改变它,我无法想象他们会破坏多少网站。:-))我避免依赖未记录的行为,所以我建议$(document.getElementById(id))
代替,它完全依赖于记录的行为。