javascript - 使用JQuery获取点击时的行信息

Question

因此，我尝试在单击时获取表行中的数据，并使用单击的信息创建/更新另一个表。问题是我不确定如何传递数据。截至目前，我可以单击表行并启动事件，看起来我的第二个表也已创建，但信息未正确传递。

如果有人可以帮助我告诉我应该如何传递信息，我将不胜感激

$(document).on("click", "tr", function(HTMLTableRowElement){ // watch the whole document for when existing (or new) tr elements are clicked
    //console.log("table row clicked!");
    let tbody = $("#employee-Details tbody");



        let fullNameTd= $('<tr>').text(HTMLTableRowElement.FirstName+' '+HTMLTableRowElement.LastName);


        let hireDate= $('<tr>').text( moment((HTMLTableRowElement.HireDate)).format('MM/DD/YYYY'));
        let fullAddress= $('<tr>').text(HTMLTableRowElement.AddressStreet+' '+HTMLTableRowElement.AddressCity+' '+HTMLTableRowElement.AddressState+' '+HTMLTableRowElement.AddressZip);
        let salaryBonus = $('<tr>').text(' $ '+HTMLTableRowElement.SalaryBonus);

        // append all table cells to a new row
        let row = $('<tr>').append(fullNameTd).append(hireDate).append(fullAddress).append(salaryBonus); // create the row and append                                                                            // all of the tr elements.
        // replace the row on the table body
        tbody.replaceWith(row);

Answer 1

在点击回调函数中可以传入事件对象。您传入 HTMLTableRowElement 并将其用作行元素，这是不正确的。您可以使用 $(this)[0] 访问单击的行，并且在该行内您可以访问各个单元格。

看看这个骗子:link

例如，要获取名字和姓氏，您需要获取第一个和第二个单元格的文本:

let fullNameTd = $('<tr>').text(thisRow.cells[0].innerText + ' ' + thisRow.cells[1].innerText);

此外，tbody.replaceWith(row);行仅在第一次时有效，因为您正在用一行替换tbody，因此jquery第二次将找不到它。最好清除 tbody，然后追加行:

tbody.empty();
tbody.append(row);