每个 DataTable 行的编辑按钮，不能传递数据

Question

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

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

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) 显示所选行的正确索引号，因此确认它可以获取索引数字，但不是其他三列（alert(name) 不显示任何内容）。

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

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

但是当我在 Chrome 中检查页面时，它只会给我一个错误：“参数列表后未捕获的语法错误：缺少)”。我看不到缺少的括号应该在哪里。

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

作为参考，这是与我之前的解决方案最接近的函数 - 这将传递所有行数据并加载“编辑”对话框，并在我单击行本身的任意位置时填充输入字段。它是从之前的“首先单击行”版本修改的，尽管我只是添加了 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);
}

获得这些值的工作方法是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");
        }
    }

希望这会对你有所帮助。