在列表|Spring中删除

Question

我得到的列表如下：

<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">

样本输出：

Skill                Levels
English                   5
Hindi                     4
Telugu                    8

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

Answer 1

使用jQuery，情况会是这样的。

$(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)。

Answer 2

它对我有效。类似地，我也有一种情况，我想从另一个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";