刪除行後的數據錶行在刪除行後變得不確定

我有一個datatable。每行有一個Delete button。只要我使用.remove()函數刪除一行，相應的行就會被刪除，但之後單擊Save button時，刪除的行下面的行就會變得不確定。刪除行後的數據錶行在刪除行後變得不確定

下面是示例代碼：

HTML

<body> 
<form method="POST"></form> 
<div class="container">  
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Delete</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td><input type ="text" id="name_0" value ="hello0"/></td> 
      <td><button id="btn_0" onclick="del(this);">Delete</button></td> 
     </tr> 
     <tr> 
      <td><input type ="text" id="name_1" value ="hello1"/></td> 
      <td><button id="btn_1" onclick="del(this);">Delete</button></td> 
     </tr> 
     <tr> 
      <td><input type ="text" id="name_2" value ="hello2"/></td> 
      <td><button id="btn_2" onclick="del(this);">Delete</button></td> 
     </tr> 
     <tr> 
      <td><input type ="text" id="name_3" value ="hello3"/></td> 
      <td><button id="btn_3" onclick="del(this);">Delete</button></td> 
     </tr> 

    </tbody> 
</table> 

<input type="button" value="Save" id="btnSave"/> 
</div> 
</body>

JS：

$(document).ready(function() { 
var i =0; 
$('#example').dataTable({ 
      "aoColumns": [ 
          null, { "bSortable": false } 
         ], 
      "aaSorting": [], 
      "pageLength": 10, 
      "lengthMenu": [5, 10, 25, 50, 100, 200] 

     });  

$('#btnSave').click(function(){ 
var tbl = $('#example').dataTable(); 
$(tbl.fnGetNodes()).each(function() { 

      alert($(this).find("#name_" + i).val()); 
      i++; 
      }); 

    }); 
}); 

function del(element) 
{ 
    var btnId = element.id; 
    var idIndex = btnId.substring(btnId.indexOf("_") + 1); 
    var table = $('#example').DataTable(); 
    table.row($($("#btn_" + idIndex)).parents('tr')).remove().draw(); 
}

這裏是相同的非工作Demo。

如何刪除一行然後單擊Save button，刪除的行下面的行不應該被定義。

任何援助將不勝感激。

來源

2016-01-15 Senjuti Mahapatra

發生這種情況是因爲刪除行後，行索引與INPUT元素的ID之間存在不匹配。

短期解決方法是使用下面的代碼來代替：

alert($(this).find("input[type=text]").val());

代碼和演示見updated jsFiddle。

來源

2016-01-15 03:33:39

$(document).ready(function() { 
     $('#btnSave').click(function() { 
      $('#example tbody tr').each(function() { 
       alert($(this).find("td:eq(0)").find('input').val()); 
      }); 
     }); 
    }); 

    function del(element) { 
     $(element).closest('tr').remove(); 
    }

來源

2016-01-15 04:49:05 Aswathy

刪除行後的數據錶行在刪除行後變得不確定

回答

相關問題