刪除列表|春天

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