jquery dynamically add table rows dynamically remove table row

In a lot of html, we used the partial refresh, partial refresh is to use js to dynamically modify the html local data. The following describes how to dynamically increase jquery table at row, of course, this embodiment can be applied to any component to html.

  1. <table id= "myTable" class="table">
  2. <thead>
  3. <tr>
  4. < TH> Steering Group </ TH>
  5. < TH> members </ TH>
  6. < TH> Leader </ TH>
  7. < TH> operation </ TH>
  8.  
  9. </tr>
  10. </thead>
  11. <tbody id= "myTb">
  12.  
  13. </tbody>
  14. < /table>

Now we come to dynamically add table rows, js code is as follows

  1. var trTemp = $(" <tr id='tr"+groupId+"'></tr>");
  2. trTemp.append(" <td>" + groupName + "</td>");
  3. trTemp.append(" <td>"+ isNull(fullName) +"</td>");
  4. trTemp.append(" <td>"+ isNull(groupLeader) +"</td>");
  5. trTemp.append(" <td><button onclick='addGroupMember("+ groupId + ")'>添加组员</button><button onclick='addGroupLeader("+ groupId + ")'>添加组长</button><button style='background:red;' onclick='clearData("+groupId+")'>清除</button></td>");
  6. trTemp.appendTo("#myTb");

Principle is to add the dynamically generated html code to go to the table

Delete dynamic elements of the current need is to get the table to delete, delete, js code is as follows

$('#tr' + id).remove();

So that you can delete the

Guess you like

Origin www.cnblogs.com/zhuyeshen/p/11433720.html