Home >Web Front-end >JS Tutorial >Summary of jQuery methods for dynamically adding rows to html tables

Summary of jQuery methods for dynamically adding rows to html tables

php中世界最好的语言Original: 2018-04-24 09:52:464008browse

This time I will bring you a summary of jQuerymethods of dynamically adding rows to html tables, what are the notes for jQuery to dynamically add rows to html tables, The following is a practical case, let’s take a look.

The example in this article describes the jQuery method of dynamically adding new rows to an html table. Share it with everyone for your reference. The specific implementation method is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add Row example</title>
<script src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<!-- jQuery Code will go underneath this -->
$(document).ready(function () {  
 // Code between here will only run when the document is ready
 $("a[name=addRow]").click(function() {
  // Code between here will only run 
  //when the a link is clicked and has a name of addRow
  $("table#myTable tr:last").after('<tr><td>Row 4</td></tr>');
  return false;
 });
});
</script>
</head>
<body>
<table style="width: 100%" id="myTable">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Summary of jQuery methods for dynamically adding rows to html tables

Related articles