创建动态表格
1.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TABLE01</title>
<script type="text/javascript">
function add() {
var t = document.getElementById("tab");
var r = t.insertRow();
var c1 = r.insertCell();
var c2 = r.insertCell();
var c3 = r.insertCell();
c1.innerHTML ="<input type='text'>";
c2.innerHTML ="<input type='text'>";
c3.innerHTML = "<button onclick='del(this)' > - </button>";
}
function del(obj){
var d = obj.parentNode.parentNode;
d.parentNode.removeChild(d);
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="2" id="tab">
<tr>
<td width="150px" height="20px"> 编号 </td>
<td width="150px" height="20px"> 内容 </td>
<td width="38px" height="20px"> 删除 </td>
</tr>
</table>
<button onclick="add()" > + </button>
</body>
</html>
1.2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS创建动态表格</title>
<script type="text/javascript">
function delrow(obj){
var tr = obj.parentNode.parentNode;
var table = document.getElementById("mytable");
table.deleteRow(tr.rowIndex);
} var count=2;
function addrow(){
var table = document.getElementById("mytable");
var tr = table.insertRow(); //插入一个新的 行
var td1 = tr.insertCell(); //插入一个新的 列
var td2 = tr.insertCell();
var td3 = tr.insertCell();
td1.innerHTML=count+"<input type='text'></input>";
td2.innerHTML="<input type='text'></input>";
td3.innerHTML="<input type ='button' value=' - ' onclick='delrow(this)'></input>";
count++;
}
</script>
</head>
<body>
<table id = "mytable" border="1">
<tr>
<td>1<input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type ="button" value=" - " onclick="delrow(this)"></input></td>
</tr>
</table>
<input type ="button" value=" + " onclick="addrow()"></input>
</body>
</html>
创建动态表格，添加内容
2.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TABLE02</title>
<script type="text/javascript">
function add(){
var name=document.getElementById("name").value;
var txt =document.getElementById("txt").value;
var t = document.getElementById("tab");
var r = t.insertRow();
var c1 = r.insertCell();
c1.innerHTML=name;
var c2 = r.insertCell();
c2.innerHTML=txt;
}
</script>
</head>
<body>
<div align="center">
<form action="#" method="post" >
姓名: <input type="text" id="name">
内容: <input type="text" id="txt" />
<input type="button" value="添加" align="center" onclick="add()"/>
<input type="reset" value="重置">
</form>
<br/>
<table id="tab" border="1" align="center" width="500PX">
</table>
</div>
</body>
</html>
2.2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 创建动态表格传值</title>
<script type="text/javascript">
function addrow(){
var name = document.getElementById("name").value;
var num = document.getElementById("num").value;
var table=document.getElementById("mytable");
var tbody=document.createElement("tbody");
var tr=document.createElement("tr");
var td_name=document.createElement("td");
var td_num=document.createElement("td");
td_name.appendChild(document.createTextNode(name))
td_num.appendChild(document.createTextNode(num))
tr.appendChild(td_name);
tr.appendChild(td_num);
tbody.appendChild(tr);
table.appendChild(tbody);
}
</script>
</head>
<body>
姓名<input type="text" id="name">
编号<input type="text" id="num"><br/>
<input type="button" value="增加" onclick="addrow()">
<table id="mytable" border="1" >
<tr>
<td>姓名</td>
<td>编号</td>
</tr>
</table>
</body>
</html>