jquery操作表格行（增加、刪除）
阿新 • • 發佈：2019-02-07
<span style="color:#ff0000;">js+css程式碼:</span><style type="text/css"> table td{border:1px solid #F00;height:30px;} </style> <script type="text/javascript" src="function/jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" > $(document).ready(function(){ $("#tab tr").attr("align" , "center"); //add a row $("#but").click(function(){ var _len = $("#tab tr").length; $("#tab").append("<tr id='"+_len+"' align='center'>" +"<td>"+_len+"</td>" +"<td>Dramtic"+_len+"</td>" +"<td><input type='text' id='desc"+_len+"' name='desc"+_len+"'/></td>" +"<td><a href=\'javascript:void(0)\' onclick=\'deltr("+_len+")\'>刪除</a></td>" +"</tr>"); }) }) var deltr = function(index){ alert("您確定要刪除第"+index+"行資料麼？"); var _len = $("#tab tr").length; $("tr[id='"+index+"']").remove();aa for(var i=index+1 , j=_len ; i<j ; i++){ var nextVal = $("#desc"+i).val(); $("tr[id='"+i+"']").replaceWith("<tr id='"+(i-1)+"' align='center'>" +"<td>"+(i-1)+"</td>" +"<td>Dramtic"+(i-1)+"</td>" +"<td><input type='text' id='desc"+(i-1)+"' name='desc"+(i-1)+"' value='"+nextVal+"'/></td>" +"<td><a href=\'javascript:void(0)\' onclick=\'deltr("+(i-1)+")\'>刪除</a></td>" +"</tr>"); } } </script>
<span style="color:#ff0000;">html程式碼：</span><body> <form action=""> <table id="tab" style="border-collapse:collapse"> <tr> <td width="105">序號</td> <td width="181">標題</td> <td width="112">說明</td> <td width="112">操作</td> </tr> </table> <br> <input type="button" id="but" value="add a row at the end"/> </form> </body>