萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery實現html表格動態添加新行的方法

jQuery實現html表格動態添加新行的方法

   本文實例講述了jQuery實現html表格動態添加新行的方法。分享給大家供大家參考。具體實現方法如下:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!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>

  希望本文所述對大家的jQuery程序設計有所幫助。

copyright © 萬盛學電腦網 all rights reserved