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

})

如果您使用的是此解决方案，则可以删除onclick="selectSkill(this.id)上的tr。

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

列表中删除|弹簧

2 个答案: