Javascript 在列表中删除| Spring

我得到的清单如下：

<table border=1 align="center" width="90%" id="skilltableId">
        <thead>
            <tr>
                <th>Skill</th>
                <th>Levels</th>
            </tr>
        </thead>
        <tbody class="agentSkills" id="agentSkills">
            <core:forEach items="${personForm.skillList}" var="skill" varStatus="status">
                <tr  id='${skill.skillDbid}' class='trClass' onclick="selectSkill(this.id)">

                    <td>${skill.skillName}
                    <form:hidden path="skillList[${status.index}].skillName" id="hiddenSkillname"/>
                      </td>
                     <form:hidden path="skillList[${status.index}].skillDbid" id="hiddenSkilldbid"/>
                    <td colspan="2">${skill.skillLevel}
                    <form:hidden path="skillList[${status.index}].skillLevel" id="hiddenSkillLevel"/>
                     </td>
                </tr>
            </core:forEach>

        </tbody>
    </table>
    <input type="button" id="delBtn">

数据将以上述格式的表格格式列出。如果单击“tr”，则应突出显示该行，然后在单击按钮（id=“delBtn”）后，应将特定数据从列表中删除。我怎样才能做到这一点呢？

有了它，情况就差不多了

$(document).ready(function() {

    // Click Event on the tr
    $(".trClass").click(function() {
        //Remove the highlight if already selected
        if($(this).attr("data-selected") == "selected") {
            $(this).css("background-color", "InitialColor");
            $(this).attr("data-selected", "notSelected");
            return;
        }

        // Highlight the tr
        $(this).css("background-color", "ColorYourWant");
        $(this).attr("data-selected", "selected");
    });

    //Click Event on the button
    $("#delBtn").click(function() {
        // Delete the tr
        $('tr[data-selected="selected"]').remove();

        //AJAX can be add here if you want to do something like deleting the row from the database
    });

})

---

如果您正在使用此解决方案，您可以在

tr

上删除

onclick=“selectSkill（this.id）

，它对我很有效。类似地，我遇到了一种情况，我想从另一个jsp添加一行。如何操作..我尝试的脚本正在添加，但没有绑定到列表..下面是一个示例代码

var table = window.parent.parent.parent.personTabs.document.getElementById("skilltableId").getElementsByTagName("tbody")[0];
    //alert("table:"+table);
        //var tbody = window.parent.parent.parent.personTabs.document.getElementById("skillRow");
        //alert(tbody);
        var row = document.createElement("tr");
        //alert(row);
        var data1 = document.createElement("td");
        //alert(data1);
        data1.appendChild(document.createTextNode(document.getElementById("selecetedValue").value));
        alert(window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillname").value);
        window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillname").value=window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillname").value+"\t"+document.getElementById("selecetedValue").value;
        var data2 = document.createElement("td");
        //alert(data2);
        data2.appendChild (document.createTextNode(document.getElementById("type").value));
        window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillLevel").value=window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillLevel").value+"\t"+document.getElementById("type").value;
        var data3 = document.createElement("td");
        //alert(data2);
        data3.appendChild (document.createTextNode(document.getElementById("commonDbid").value));
        window.parent.parent.parent.personTabs.document.getElementById("hiddenSkilldbid").value=window.parent.parent.parent.personTabs.document.getElementById("hiddenSkilldbid").value+"\t"+document.getElementById("commonDbid").value;
        row.appendChild(data1);
        row.appendChild(data2);
        //row.appendChild(data3);
        table.appendChild(row);
        window.parent.parent.document.getElementById("popup1").style.display="none";

---

我尝试使用脚本。它正在从表中删除。但是它也应该从列表中删除。如何做。你在说哪个列表。Java列表？你正在从数据库中获取列表吗？嗨，jean，你的代码工作了。但是添加新行不起作用。我有一个相同的表，其中有三个按钮（添加、删除、编辑）[first jsp]。当我单击“添加按钮”时，我会显示一个弹出窗口，其中有两个文本框和一个按钮[另一个jsp]。文本框中的这两个值应添加到列表中，即，第一个jsp，并应生成一个新行。如何操作…？此外，当我单击新生成的行时，onclick函数也应起作用。。感谢adv.！！@Hi jean…我需要处理我在jsp中获得的列表。。就像我要添加到新行中的列表对象一样，删除一行，编辑一个列表行..这些应该在不去控制器的情况下发生..我正在尝试.直到现在都没有成功..让我知道..谢谢你的帮助。。

var table = window.parent.parent.parent.personTabs.document.getElementById("skilltableId").getElementsByTagName("tbody")[0];
    //alert("table:"+table);
        //var tbody = window.parent.parent.parent.personTabs.document.getElementById("skillRow");
        //alert(tbody);
        var row = document.createElement("tr");
        //alert(row);
        var data1 = document.createElement("td");
        //alert(data1);
        data1.appendChild(document.createTextNode(document.getElementById("selecetedValue").value));
        alert(window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillname").value);
        window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillname").value=window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillname").value+"\t"+document.getElementById("selecetedValue").value;
        var data2 = document.createElement("td");
        //alert(data2);
        data2.appendChild (document.createTextNode(document.getElementById("type").value));
        window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillLevel").value=window.parent.parent.parent.personTabs.document.getElementById("hiddenSkillLevel").value+"\t"+document.getElementById("type").value;
        var data3 = document.createElement("td");
        //alert(data2);
        data3.appendChild (document.createTextNode(document.getElementById("commonDbid").value));
        window.parent.parent.parent.personTabs.document.getElementById("hiddenSkilldbid").value=window.parent.parent.parent.personTabs.document.getElementById("hiddenSkilldbid").value+"\t"+document.getElementById("commonDbid").value;
        row.appendChild(data1);
        row.appendChild(data2);
        //row.appendChild(data3);
        table.appendChild(row);
        window.parent.parent.document.getElementById("popup1").style.display="none";