看了好多人问jquery动态添加表格。写了一遍又一遍,现在决定写在这儿吧,让不会的人来看看。
第一种,在表格上面有个删除按钮,删除下面复选框的选中的值。
js:
<script>
$(function(){
$("#addrow").click(function(){
var len=document.getElementById("table1").getElementsByTagName("tr").length;
len = len-2;
var tr="<tr>"+
"<td>"+len+"</td>"+
"<td><input type=\"checkbox\" id=\"check1\" name=\"check\" onclick=\"check()\"></td>"+
"<td>01</td>"+
"<td>職稱</td>"+
"<td>01</td>"+
"<td>董事長</td>"+
"<td>boss</td>"+
"</tr>";
$("#table1").append(tr);
});
$("#delrow").click(function(){
var check = document.getElementsByName("check");
for(var i=0;i<check.length;i++){
if(check[i].checked){
document.getElementById('table1').deleteRow(i+3);
i--;
}
}
})
})
</script>
jsp:
<table>
<tr>
<td colspan="7">
<input type="button" value="帥選器">
<input type="button" value="新增" >
<input type="button" value="刪除" >
<input type="button" value="保存">
<input type="button" value="取消">
</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2">編號類別</td>
<td colspan="3">基礎編號 </td>
</tr>
<tr>
<td></td>
<td><input type="checkbox"></td>
<td><span>代號</span></td>
<td><span>民稱</span></td>
<td><span>代號</span></td>
<td><span>中文名稱</span></td>
<td><span>英文名稱</span></td>
</tr>
</table>
第二种:直接在添加的一行添加删除按钮:
js:
<script>
$(function(){
$("#addrow").click(function(){
var tr="<tr>"+
"<td>01</td>"+
"<td>董事長</td>"+
"<td><input type="button"/></td>"+
"</tr>";
$("#table1").append(tr);
});
})
function dele(r){
var len=$("#table1 tr").length;
if(len==2){
alert("您不能删除表头");
return;
}
if(confirm("确定删除?")){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('table1').deleteRow(i);
}
}
</script>
jsp中:
<talbe><tr><td>序号</td><td>标题</td><td>操作</td></tr></table>
另外导入jquery的库
本文出自 “IT邋遢员” 博客,请务必保留此出处