如何为显示标签表中的行赋予唯一的行 ID？

Question

我正在使用显示标签在我的 JSP 上显示用户列表。我在每一行都有一个删除按钮，用于从列表中删除特定的行/用户。为此，我正在使用 ajax。

正在使用 ajax 从数据库中删除用户。但是因为我使用的是ajax。直到我刷新页面，用户仍然在显示标签列表中。

有什么方法可以使用 javascript 从显示表中删除该行？

据我所知，可以使用 javascript 从表中删除行，但您至少需要知道行 ID。

那么，如何为显示表中的每一行赋予唯一的行 ID？

请帮忙。

下面是我的代码

<display:table name="employeeUpdateList" pagesize="50" 
    class="listingTable" keepStatus="true" cellpadding="0px"
    cellspacing="0px" id="employeeUpdate" export="true" requestURI="">
    <display:setProperty name="export.decorated" value="true" />
    <display:setProperty name="export.excel.filename"
        value="Employee Update List.xls" />
    <display:column title="What is changed" property="columnName"></display:column>
    <display:column title="From" property="oldValue"></display:column>
    <display:column title="To" property="newValue"></display:column>
    <display:column title="Effective Date">
        <fmt:formatDate value="${employeeUpdate.effectiveDate}"
            pattern="dd MMMM yyyy" />
    </display:column>
    <display:column title="Changed By" property="changedBy.fullname"></display:column>
    <display:column title="Changed On">
        <fmt:formatDate value="${employeeUpdate.changedOn }"
            pattern="dd MMMM yyyy hh:mm:ss" />
    </display:column>
    <display:column media="html"
        style="text-align :center!important;padding:0px!important">
        <input class="input-button-small" type="button"
            value="<spring:message code='button.delete' />"
            onclick="deleteEmployeeUpdate('${deleteEmployeeUpdateUrl}','${employeeUpdate.id}')" />
    </display:column>
    <display:setProperty name="paging.banner.item_name"
        value="Employee Update" />
    <display:setProperty name="paging.banner.items_name"
        value="Employee updates " />
</display:table>

Answer 1

更新 - 现在您已经发布了代码，我看到您正在使用 DOM0 onclick="..." 处理程序。我不建议这样做（见下文，这是进行事件委托的经典用例 - 在表级别而不是单个按钮上观察点击），但是..

您需要修改您的deleteEmployeeUpdate 函数以接受另一个参数，即被单击的按钮。所以：

onclick="deleteEmployeeUpdate(this, '${deleteEmployeeUpdateUrl}','${employeeUpdate.id}')"

和

function deleteEmployeeUpdate(button, url, id) {
    // ...
}

然后在该函数中删除包含按钮的行：

var row = button.parentNode;
while (row && row.tagName.toLowerCase() !== "tr") {
    row = row.parentNode;
}
if (row) {
  row.parentNode.removeChild(row);
}

下面是使用事件委托的解决方案，下面是一些方便的阅读。

---

您无需提供行 ID。当您处理删除按钮上的click 事件时，通常您对该删除按钮元素的引用为this。它有一个parentNode property，它是包含它的节点（元素）。这可能是一个表格单元格 (td)。 它还有一个parentNode属性，大概是行（tr），它也有一个父级，通常是tbody等。

您可以通过调用其父节点的removeChild function 并传入tr 元素来移除一行。

这是一个完整的例子：Live copy | source

HTML：

<table id="theTable">
  <tbody>
    <tr><td>First row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Second row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Third row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Fourth row</td><td><button class="delete">Delete</button></td></tr>
  </tbody>
</table>

JavaScript：

(function() {

  // Get a reference to the table
  var theTable = document.getElementById("theTable");

  // Watch for clicks
  hookEvent(theTable, "click", function(event) {
    var elm, row, tbody;
    elm = event.target
    while (elm && elm.className !== "delete") {
      elm = elm.parentNode;
    }
    if (elm) {
      // It's the delete button, remove this row
      row = elm.parentNode.parentNode; // Parent of button's parent
      tbody = row.parentNode;
      tbody.removeChild(row);
    }
  });

  // === Basic utility functions

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, function(event) {
        return handler(event || window.event);
      });
    }
    else {
      throw "Browser not supported.";
    }
  }
})();

阅读：

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Web Application APIs

---

FWIW，我强烈推荐使用像 jQuery、Prototype、YUI、Closure 或 any of several others 这样的优秀 JavaScript 库。该示例大大缩短了，这表明您可以专注于您正在尝试构建的内容，而不是纠结于低级 DOM API 的细节。

例如上面使用jQuery：Live copy | source

HTML：

（没有变化）

JavaScript：

jQuery(function($) {
  $("#theTable").on("click", "button.delete", function() {
    $(this).closest("tr").remove();
  });
});

这适用于 jQuery 1.7 及更高版本。如果你之前使用过一些东西，你会使用delegate 而不是on（注意参数顺序的变化）：

jQuery(function($) {
  $("#theTable").delegate("button.delete", "click", function() {
    $(this).closest("tr").remove();
  });
});

使用几乎任何其他库都会同样简单。