javascript - 每个 DataTable 行的编辑按钮，无法传递数据

Question

我有一个名为 Branches 的数据表，其中包含三列:名称、代码和电子邮件(以及对用户隐藏的 ID 列)。它最初在顶部有一个“编辑”按钮，只有在单击一行后，用户才能单击该按钮打开一个填充了字段的对话框并进行编辑。但现在我需要更改它，以便每一行都有自己的“编辑”按钮，因此无需先单击该行。

现在我在数据表中的每一行都有一个“编辑”按钮，但除了索引号之外，我无法传递该特定行的数据。相关的代码块如下(除非我遗漏了什么，请告诉我是否有):

var txtName2 = $("#txtName2"); //For Update
var txtCode2 = $("#txtCode2");
var txtEmail2 = $("#txtEmail2");
var dialog;
var tblBranch = $("#tblBranches");
var branchList;
var selectedIndex;

branchList = response.branches;
var data = { "aaData": [] };

    $.each(response.branches, function (i, item) {
        data.aaData.push({
            "id": item.id,
            "name": item.name,
            "code": item.code,
            "email": item.email,
            "action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ")'</button>"
        });
    });

function testUpdateButton(index, name, code, email) {
    //alert(index);
    selectedIndex = tblBranch.row(this).index();
    var selectedName = tblBranch.row(index).name;
    var selectedCode = tblBranch.row(index).code;
    var selectedEmail = tblBranch.row(index).email;
    //alert(name);
    onBtnUpdateClicked(index, name, code, email);
    }

function onBtnUpdateClicked(index, name, code, email) {
    if (branchList != null && branchList.length > 0) {
        var selectedItem = branchList[selectedIndex];
        txtName2.val(selectedItem.name);
        txtCode2.val(selectedItem.code);
        txtEmail2.val(selectedItem.email);
        dialog = $("#dialog-form-update").dialog("open");
        }
    }

当我只在按钮处传递索引号“i”而不是名称、代码或电子邮件时，testUpdateButton下的alert(index)会显示所选行的正确索引号，因此确认它可以获取索引数字，但不显示其他三列(警报(名称)不显示任何内容)。

所以我尝试在按钮上传递所有四个字段，如下所示:

"action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ", " + item.name + ", " + item.code + ", " + item.email + ")'</button>"

但当我在 Chrome 中检查页面时，它只会给我一个错误:“Uncaught SyntaxError: Missing ) after argument list”。我看不出缺少的括号应该在哪里。

基本上，我可以获取索引号，但无法使用它来获取相应的名称、代码和电子邮件。

作为引用，这里是与我之前的解决方案最接近的函数 - 这将传递所有行数据并加载“编辑”对话框，其中每当我单击行本身的任意位置时都会填充输入字段。它是对以前的“首先单击行”版本进行修改的，尽管我只是添加了 onBtnUpdateClicked 函数。并不理想，但至少它做了它应该做的事情。

$("#tblBranches tbody").on('click', 'tr', function () {
    selectedIndex = tblBranch.row(this).index();
    onBtnUpdateClicked();
});

非常感谢任何帮助。

Answer 1

由于您能够获取行的索引，因此您可以使用它来获取其他值。尝试这样的事情

function testUpdateButton(index){
            //alert(index);
        selectedIndex = index;
        var name=$("table tr").eq(index).children('td').eq(1).text();
        var email=$("table tr").eq(index).children('td').eq(2).text();
        alert(name);
        alert(email);
        onBtnUpdateClicked(index, name, email);
}

获取这些值的工作 fiddle 是 https://jsfiddle.net/shoaibakhter/atpgdofh/19/ 。这不是一个完整的解决方案，但是这将帮助您获取其他值，您可以在 onBtnUpdateClicked 函数中传递这些值。您必须根据表结构更改函数，并在 onBtnUpdateClicked 中使用这些值，如下所示-

function onBtnUpdateClicked(index, name, email) {
    if (branchList != null && branchList.length > 0) {
        var selectedItem = branchList[index];
        txtName2.val(name);
        txtEmail2.val(email);
        dialog = $("#dialog-form-update").dialog("open");
        }
    }

希望这对您有帮助。