我有一个表,当用户在一行中更改ID时,我必须根据这个新ID将行重新定位到新位置。
所以我创建了一个更改函数来管理它,但在我的代码中,我在移动行时再次触发更改。
有一种方法可以在移动时不触发更改,或者我必须以不同的方式触发更改?
有什么想法吗?
HTML CODE:
<table id='eap'>
<tr><th>ID</th><th>INFO1</th><th>INFO2</th></tr>
<tr><td><input name="ID1" value='1'/></td><td>1.1</td><td>1.2</td></tr>
<tr><td><input name="ID2" value='2'/></td><td>2.1</td><td>2.2</td></tr>
<tr><td><input name="ID3" value='3'/></td><td>3.1</td><td>3.2</td></tr>
<tr><td><input name="ID4" value='4'/></td><td>4.1</td><td>4.2</td></tr>
<tr><td><input name="ID5" value='5'/></td><td>5.1</td><td>5.2</td></tr>
</table>
JQUERY CODE:
$('#eap tbody tr input[name^="ID"]').change(function () {
alert('start');
//changed row
var $row = $(this).closest('tr');
//New ID
var $newID = this.value;
//Loop all in search for the correct ID position
$('#eap tr input[name^="ID"]').each(function (i){
if ( (parseInt($newID) <= parseInt($(this).val())) && $row.index() != $(this).closest('tr').index() ){
//found position
$newrow = $(this).closest('tr');
//move row
//this trigger change again
$($newrow).before($($row));
return false;
}
});
//put id in order
$id=1;
$('#eap tr input[name^="ID"]').each(function (i){
$(this).val($id);
$id++;
});
});