JQuery Datatable是一款非常流行的表格插件,它提供了行內編輯的功能,方便用戶對表格中的內容進行修改。下面,我們就來詳細講解一下這個功能的實現方法。
$(document).ready(function(){
var table = $('#example').DataTable();
$('#example tbody').on('click', 'td', function () {
var cell = table.cell(this);
if (cell.index().column != 0) {
cell.data('').draw();
}
});
$('#example tbody').on('blur', 'input', function () {
var cell = table.cell(this.parentNode);
cell.data($(this).val()).draw();
});
});
以上代碼首先初始化了一個Datatable,然后對表格的每一個單元格進行了click事件的監聽,當用戶點擊單元格時,就將該單元格的值替換成一個input控件,并在其中填入原有的值。
之后,又對輸入框的blur事件進行了監聽,當用戶在輸入框中輸入完成后,就將該單元格的值替換成輸入框中的新輸入值,并重新繪制表格。
通過以上代碼,我們就能輕松實現對JQuery Datatable表格中行內編輯的功能。希望對大家有所幫助。