我正面临一个代码中的错误，我有大约3个表。问题是（删除，编辑，添加）按钮只更改第一个表而不是提到的表，例如，如果我试图在表3中添加行，它会在表1中添加一行而在表3中不执行任何操作，我需要为自己分隔每个表，我尝试编辑代码，但每次只更改第一个。我试图给table2和3一个不同的id，因为我发现table1有一个id，同样只发生了表1更改，编辑功能工作但是它也改变了table1的表，所以从技术上来说它不起作用。
这是js代码
var TableDatatablesEditable = function () {
var handleTable = function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[5].innerHTML = '<a class="cancel" href="">Cancel</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnUpdate('<a class="delete delete1 delete2" href="">Delete</a>', nRow, 5, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}
var table = $("#sample_editable_1, #table2, #table3");
var oTable = table.dataTable({
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// set the initial value
"pageLength": 5,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#sample_editable_1_wrapper, #table2_wrapper, #table3_wrapper");
var nEditing = null;
var nNew = false;
$("#sample_editable_1_new, #table2new, #table3new").click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previous row not saved. Do you want to save it ?")) {
saveRow(oTable, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
table.on('click', '.delete, .delete1, .delete2', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
nNew = false;
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
return {
//main function to initiate the module
init: function () {
handleTable();
}
};
}();
jQuery(document).ready(function() {
TableDatatablesEditable.init();
});
我试图为每个表添加类delete1，delete和delete2，如您所见。而且我确信每个班级都在正确的地方
答案 0 :(得分：0)
您正在选择3个表并以某种方式初始化它们：
oTable您的dataTable变量：
editRow(oTable, nRow);函数的代码）。但是你正在使用像data这样的表，因此将整个3个表传递给你的编辑函数，这是完全错误的。基本上，您的方法与您的代码完全错误。你需要保留（或能够重建）你的控件和对象之间的连接，你试图控制。然后，您需要获取对象以控制事件处理程序内部并进一步传递。
可以通过不同的方式完成，下面的代码只是一个示例
如果每个表都有单独的控件集（例如，每个表旁边有3个“添加行”按钮），并且表本身及其控件都驻留在单独的容器中 - 您只需将引用存储在容器{{{ 1}}存储并从这里使用它，如：
// Initialization of all tables
$('table').each(function () {
// Initializing table
var $table = $(this).dataTable({/* options */});
// Obtaining container
var $container = $table.closest('.container');
// Storing table reference into container
$container.data('table', table);
});
// Later in code
$('.some-control').on('click', function () {
// Obtaining container
var $container = $(this).closest('.container');
// Obtaining table reference from container
var $table = $container.data('table');
// ... doing anything with our table
});
如果您有一组控件 - 那么您需要一种方法来选择表格，然后在选择时您可以将对它的引用存储到变量中并将其用于处理。