Of Stack

Realization of Dynamic Addition and Deletion of jQuery List

  • 2021-09-12 00:22:03
  • OfStack

Realize dynamic addition and deletion of list data through jQuery

Code demo

Demo address

Background interlaced color change

CSS code 


/*  Set odd line color  */
.even {
 background-color: dodgerblue;
}

/*  Set the background color of even lines  */
.odd {
 background-color: pink;
}

JavaScript code 


//  Set the background color of odd and even lines 
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");

Select All and Cancel Select All Events 


// Set Select All and Cancel Select All Events 
$("thead th:first").append("<span id='show'></span>")
$("thead input:checkbox").click(function () {
 if ($(this).prop("checked")) {
 $("tbody input:checkbox").prop("checked", true);
 $("#show").replaceWith("<span id='show'> All selected </span>");
 } else {
 $("tbody input:checkbox").prop("checked", false);
 $("#show").replaceWith("<span id='show'> All selection has been canceled </span>");
 }
});

Delete 


// Add binding events to current and future elements 
$("tbody").on("click", "td>a:nth-child(2)", function () {
 if (confirm(" Are you sure you want to delete ?")) {
 // Cancel the background color 
 $("tr:even").removeClass("even");
 $("tr:odd").removeClass("odd");
 // Remove tr
 $(this).parent().parent().remove()
 // Add background color 
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 }
});

Add

HTML code 


<!-- Add list -->
<div>
 <form>
 <table>
  <tr>
  <td> Serial number </td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td> Classification name </td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td> Classification description </td>
  <td><input type="text"/></td>
  </tr>
  <input type="reset" value=" Determine "/>
  <input type="reset" value=" Cancel "/>
 </table>
 </form>
</div>

CSS code 


/* Hide new pages by default */
div:nth-child(2) {
 display: none;
}

JavaScript code 


//  Click " Add " Button to display the new list 
$("div:nth-child(1)>input:button").click(function () {
 $("div:nth-child(2)").show("slow");
});


// Click " Cancel " Button hide div
$("div:nth-child(2) :reset:last").click(function () {
 $("div:nth-child(2)").hide("slow");
});


// Click " Determine " Button , Submit a form 
$("div:nth-child(2) :reset:first-child").click(function () {
 $("div:nth-child(1) tbody").append(" <tr>\n" +
 "  <td><input type=\"checkbox\"/></td>\n" +
 "  <td></td>\n" +
 "  <td></td>\n" +
 "  <td></td>\n" +
 "  <td><a href=\"#\"> Modify </a>&nbsp<a href=\"#\"> Delete </a></td>\n" +
 " </tr>");

 //  Get a text box node 
 var textDom = $("div:nth-child(2) :text");
 //  Get td Node 
 var tdDom = $("div:nth-child(1) tr:last td");
 for (var i = 0; i < textDom.length; i++) {
 // Get the contents of the text box 
 var content = textDom.eq(i).val();
 //  Writes the contents obtained by the text box to the td Inside 
 tdDom.eq(i + 1).text(content);
 }
 // Add background color 
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 $("div:nth-child(2)").hide("slow");
});

Complete code

HTML code 


<body>
<div>
 <input type="button" value=" Add "/>
 <table cellpadding="0px" cellspacing="0px">
 <thead>
 <tr>
  <th><input type="checkbox"/></th>
  <th> Serial number </th>
  <th> Classification name </th>
  <th> Classification description </th>
  <th> Operation </th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td><input type="checkbox"/></td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td><a href="#"> Modify </a>&nbsp<a href="#"> Delete </a></td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td><a href="#"> Modify </a>&nbsp<a href="#"> Delete </a></td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>3</td>
  <td>3</td>
  <td>3</td>
  <td><a href="#"> Modify </a>&nbsp<a href="#"> Delete </a></td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>4</td>
  <td>4</td>
  <td>4</td>
  <td><a href="#"> Modify </a>&nbsp<a href="#"> Delete </a></td>
 </tr>
 </tbody>
 </table>
</div>

<!-- Add list -->
<div>
 <form>
 <table>
  <tr>
  <td> Serial number </td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td> Classification name </td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td> Classification description </td>
  <td><input type="text"/></td>
  </tr>
  <input type="reset" value=" Determine "/>
  <input type="reset" value=" Cancel "/>
 </table>
 </form>
</div>
</body>

CSS code 


//  Set the background color of odd and even lines 
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
0

JavaScript code 


//  Set the background color of odd and even lines 
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
1

Summarize

Related articles: