javascript自动向表格中添加数据_js宏怎么把数据自动填写到空的单元格中-优快云博客

本文链接：https://blog.youkuaiyun.com/Luokaiqin520/article/details/79209460

这篇博客介绍了一个JavaScript函数，该函数用于动态向HTML表格中添加数据。用户输入姓名、年龄和生日，点击添加按钮后，信息会显示在表格新行中。每个新行还包含一个删除按钮，点击后会弹窗确认是否删除该行。删除操作通过修改DOM结构实现，实际应用中还需考虑数据在数据库中的同步删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

function tj(){

//找到控件
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var sr = document.getElementById("sr").value;
var tab2 = document.getElementById("tab2");

//创建节点
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

//为td赋值
td1.innerHTML=name;
td2.innerHTML=age;
td3.innerHTML=sr;

//将td添加给tr
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);

//创建一个input控件
var sc = document.createElement("input");
sc.setAttribute("type","button");//类型为button
sc.setAttribute("value","删除");//值为删除

sc.onclick=function(){
if(confirm("确定要删除这一行吗？"))
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
//sc - td - tr - tbody - 删除（tr）
//刷新网页还原。实际操作中，还要删除数据库中的数据，实现真正删除
}

td4.appendChild(sc);
tr.appendChild(td4);
tab2.appendChild(tr);
}
</script>
<style>
.tab1{
width: 800px;
margin-top: 30px;
}
.tab2{
width: 800px;
margin-top: 30px;
}
</style>
</head>

<body>
<center>
<div id="tab1">
姓名：<input type="text" id="name"/>
年龄：<input type="text" id="age"/>
生日：<input type="text" id="sr"/>
<input type="button" value="添加" onclick="tj()"/>
</div>

<table class="tab2" id="tab2" border="1px" cellspacing="0">
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>删除</td>
</tr>
</table>
</center>
</body>

</html>