0

我正在使用显示标签在我的 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>
4

1 回答 1

3

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

您需要修改您的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属性，即包含它的节点（元素）。这可能是一个表格单元格 ( td)。它还有一个parentNode属性，大概是行 ( tr)，它也有一个通常是 a 的父级tbody，等等。

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

这是一个完整的示例：Live copy | 来源

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或其他任何一个。该示例变得非常短，这显示了您可以如何专注于您正在尝试构建的内容，而不是纠结于低级 DOM API 的细节。

比如上面使用jQuery：Live copy | 来源

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();
  });
});

几乎任何其他库都将同样简单。

于 2012-04-23T11:33:24.537 回答