<script>
document.getElementById("submit").onclick=function(){
//获取输入节点
var name=document.getElementById("iname");
var email=document.getElementById("iemail");
var addresss=document.getElementById("iaddress");
//创建表格节点
var trNode=document.createElement("tr");
var checkboxNode=document.createElement("td");
var nameNode=document.createElement("td");
var emailNode=document.createElement("td");
var addressNode=document.createElement("td");
//向表格中添加创建的节点及文本内容
var border=document.getElementById("border");
border.appendChild(trNode);
trNode.appendChild(checkboxNode);
trNode.appendChild(nameNode);
trNode.appendChild(emailNode);
trNode.appendChild(addressNode);
var checkboxText=document.createElement("input");
checkboxText.setAttribute("type","checkbox");
var nametextNode=document.createTextNode(name.value);
var emailtextNode=document.createTextNode(email.value);
var addresstextNode=document.createTextNode(addresss.value);
checkboxNode.appendChild(checkboxText);
nameNode.appendChild(nametextNode);
emailNode.appendChild(emailtextNode);
addressNode.appendChild(addresstextNode);
}
</script>
以下是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向表格中编辑数据</title>
</head>
<body>
<form id="form1">
<ul style="float:left; margin:30px 30px;list-style:none;">
<li>姓名：<input type="text" id="iname"></li>
<li>邮箱：<input type="text" id="iemail"> </li>
<li>地址：<input type="text" id="iaddress"></li>
<li>添加：<input type="button" value="添加" id="submit"></li>
</ul>
</form>
<table border="1" id="border" style="margin:30px;border:solid 1px gray;width:400px;text-align: center;">
<colgroup>
<col width="50"/>
<col width="100"/>
<col width="100"/>
<col width="200"/>
</colgroup>
<tr>
<th><input type="checkbox" id="checkbox"></th>
<th id="name">姓名</th>
<th id="email">邮箱</th>
<th id="address">地址</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>[email protected]</td>
<td>湖北省</td>
</tr>
</table>
</body>
</html>
时间： 2025-01-10 13:15:11