今回はjqueryでテーブルの行を動的に操作する方法(コード付き)をお届けします。 jqueryでテーブルの行を動的に操作する際の注意点は何ですか?実際のケースを見てみましょう。
<script src="jquery/jquery-1.3.1.js"></script> <style type="text/css"> body{background:#FFFFFF;} </style> </head> <body> <script> $(function(){ var show_count = 20; //要显示的条数 var count = $("input:text").val(); //递增的开始值,这里是你的ID var fin_count = parseInt(count) + (show_count-1); //结束递增的条件 $("#btn_addtr").click(function(){ if(count < fin_count) //点击时候,如果当前的数字小于递增结束的条件 { $("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行 $("tr:last td input:first").val(++count); //改变添加的行的ID值。 } }); }); function deltr(){ var length=$("tr").length; if(length<=2){ alert("至少保留一行"); }else{ $("tr:last").remove(); } } </script> <input type="button" id="btn_addtr" value="增行"> <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="30" align="center" bgcolor="#CCCCCC">ID</td> <td align="center" bgcolor="#CCCCCC">Username</td> <td align="center" bgcolor="#CCCCCC">Usertype</td> <td align="center" bgcolor="#CCCCCC">Other</td> <td></td> </tr> <tr> <td height="30" align="center"><input type="text" size="2" value="1" /></td> <td align="center"><input type="text" name="username" /></td> <td align="center"> <select name="type"> <option value="1">Administrator</option> <option value="2">Guest</option> </select> </td> <td align="center"><input type="text" name="username2" /></td> <td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td> </tr> </table> </body>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
jQueryはAlipayホームページのフォーカス画像効果を模倣します
以上がjqueryでテーブルの行を動的に操作する方法(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。