Question

我正在使用display标签在我的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.";
    }
  }
})();

读：

FWIW，我强烈建议您使用好的JavaScript库，例如jQuery，Prototype，YUI，Closure或any of several others。该示例变得非常短，这表明您可以专注于您正在尝试构建的内容，而不是沉溺于低级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();
  });
});

几乎任何其他库都可以这么简单。

如何为显示标记表中的行提供唯一的行ID？

1 个答案: