<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>動態增刪表格</title>
<script src="jquery-2.1.1.js"></script>
<script>
function addRow(){
var table=$("#myTable");
var str="<tr><td><input type='checkbox' /></td><td><input type='text' /></td></tr>";
table.append(str);
}
function delRow(){
var trs=$("#myTable tr");
var isDel;
for(var i=1;i<trs.length;i++){
isDel=trs.eq(i).children().eq(0).children();
if(isDel.is(":checked")){
trs.eq(i).remove();
}
}
}
</script>
</head>
<body>
<div>
<table id="myTable" border="1px" align="center">
<tr>
<td>選擇</td>
<td>內容</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="text" /></td>
</tr>
</table>
</div>
<div align="center" style="margin-top:10px">
<button onClick="addRow()">增加</button>
<button onClick="delRow()">刪除</button>
</div>
</body>
</html>
使用JQery編寫表格的動態增刪
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章