今天给新人出了一道题：
dom 和 javascript 简单操作 完成对 table tr 的动态添加 删除功能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
function insertRow() {
var num=0;
var x=document.getElementById('newbody');
var tr=document.createElement("tr");
var td0=document.createElement("td");
var td1=document.createElement("td");
var td2=document.createElement("td");
var nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.name = "name";
var valueInput = document.createElement("input");
valueInput.type = "text";
valueInput.name = "value";
var btnInput = document.createElement("input");
btnInput.type = "button";
btnInput.value = "delete";
btnInput.onclick = function(){
deleteRow(btnInput);
};
td0.appendChild (nameInput);
td1.appendChild (valueInput);
td2.appendChild (btnInput);
tr.appendChild (td0);
tr.appendChild (td1);
tr.appendChild (td2);
x.appendChild (tr);
}
function deleteRow(obj) {
var r = obj.parentNode.parentNode;
var x=document.getElementById('newbody');
x.removeChild(r);
}
</script>
</head>
<body>
<div style="margin: 0 auto;text-align:center;width:100%;height:100%">
<table width="70%" border="1" align="center" id="tableObj">
<tr>
<th scope="col">name</th>
<th scope="col">value</th>
<th scope="col"><input type="button" value="Add" οnclick="insertRow();" /></th>
</tr>
<tbody id="newbody"></tbody>
</table>
</div>
</body>
</html>
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
