js 动态 平添 删除 tr
日期：2014-05-16 浏览次数：20324 次
今天给新人出了一道题：
?
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" onclick="insertRow();" /></th>
? </tr>
?
