您的位置：首页 > Web前端 > JavaScript

javascript表格的添加和删除

2014-06-09 22:14 357 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
var oTab = document.getElementById("tb1");

var oBtn = document.getElementById("btnAdd");
var oName = document.getElementById("txtName");
var oAge = document.getElementById("txtAge");
oBtn.onclick = function () {
var oTr = document.createElement("tr");
//第一列
var oTd = document.createElement("td");
//alert(oTab.tBodies[0].rows.length + 1);
oTd.innerText = oTab.tBodies[0].rows.length + 1;
oTr.appendChild(oTd);
//第二列
var oTd = document.createElement("td");
// alert(oName.value);
oTd.innerText = oName.value;
oTr.appendChild(oTd);

//第三号
var oTd = document.createElement("td");
// alert(oAge.value);
oTd.innerText = oAge.value;
oTr.appendChild(oTd);

//第三号
var oTd = document.createElement("td");
// alert(oAge.value);
oTd.innerText = "<a href='javascript:void(0);'>删除</a>";
oTr.appendChild(oTd);

oTd.getElementsByTagName('a')[0].onclick = function () {
oTab.removeChild(this.parentNode.parentNode);
};

oTab.tBodies[0].appendChild(oTr);
}
}
</script>
</head>
<body>
姓名：<input type="text" id="txtName" />
年龄：<input type="text" id="txtAge" />
<input type="button" id="btnAdd" value="添加" />
<input type="button" id="btnDel" value="删除" />
<table id="tb1" border="1" style="width: 500px;">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cupid</td>
<td>66</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Fly</td>
<td>45</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Sky</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>Windy</td>
<td>98</td>
</tr>
<tr>
<td>5</td>
<td>Snow</td>
<td>09</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航