删除列表 |春天

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