如何给显示标签表中的行赋予唯一的行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，我强烈建议使用一个良好的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(); 
    }); 
}); 

这将是同样简单与几乎任何其他库。