javascript实现表格的动态添加

最新推荐文章于 2023-03-06 16:52:50 发布

左边Luckyboy

最新推荐文章于 2023-03-06 16:52:50 发布

阅读量521

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_31187881/article/details/79252818

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在开发的过程中，可能需要实现表格的动态添加，例如在大学里的选课系统，当学生选择了一门课后，按下确定键后会实时在表格相应的位置打印一行选课信息表，这就是表格的动态添加，不多说废话了，直接上代码，在代码中会把思路和过程以注释的方式写在嵌套在代码中，希望各位看官请勿介意：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//定义一个动态添加表格的数据
function SaveData(){
//我主要是实现一个用户表的创建，即userid,username,phone
//这里是分别获取输入在相应位置的值，例如在添加表格时输入的userid，
//在保存到表格时需要通过input标签中的id属性中的值来获取的，所以
//以下三个分别是获取userid，username，还有userphone
var userid = document.getElementById("ID").value;
var username = document.getElementById("username").value;
var userphone = document.getElementById("phone").value;

//这是创建一个tr
trele = document.createElement("tr");
//创建一个td
tdele1 = document.createElement("td");
//为表格table创建一行，其中testTable是table标签中id属性的值
var newtr = testTable.insertRow();

//以下4句代码每一句都是为创建好的一行创建一列，总共四列
var newtd0 = newtr.insertCell();
var newtd1 = newtr.insertCell();
var newtd2 = newtr.insertCell();
var newtd3 = newtr.insertCell();
//为每一个表格添加数据
newtd0.innerHTML=userid;
newtd1.innerHTML=username;
newtd2.innerHTML=userphone;
newtd3.innerHTML="<input type='button' value='删除' οnclick='deleteTable(this)'>";
}
//这里定义的是删除的操作。
function deleteTable(r){
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("testTable").deleteRow(i);
}
</script>
<style type="text/css">
.tdstyle{
width:110px;
height:20px;
align-self: center;

}
table{
margin-top:10px;
border: 1px solid;
}
#one{
width: 100%;
height:1000px;
border: 1px solid violet;
}
#two{
margin-top:200px;
margin-left: 300px;
}
</style>
</head>
<body>
<div id="two">
ID:<input type="text" name="userid" id="ID" />
姓名:<input type="text" name="username" id="username"/>
手机号:<input type="text" name="phone" id="phone"/>
<input type="submit" name="savetable" id="savetable" value="保存" οnclick="SaveData()"/>
</div>

<table id="testTable" border="1px" cellspacing="" cellpadding="" align="center" >
<tr>
<td class="tdstyle">Id</td>
<td class="tdstyle">姓名</td>
<td class="tdstyle">手机</td>
<td class="tdstyle">操作</td>
</tr>
</table>
</body>
</html>

结果的效果如下：

点击删除的效果如下：（点击删除猪八戒）

本人是一名入门不久的小白，如果有错误或者说不好的地方，还请各位看官大人加以指出且指正，谢谢！

左边Luckyboy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现表格的动态添加

在开发的过程中，可能需要实现表格的动态添加，例如在大学里的选课系统，当学生选择了一门课后，按下确定键后会实时在表格相应的位置打印一行选课信息表，这就是表格的动态添加，不多说废话了，直接上代码，在代码中会把思路和过程以注释的方式写在嵌套在代码中，希望各位看官请勿介意：//定义一个动态添加表格的数据function SaveData(){//我主要是实现一个用户表的
复制链接

扫一扫

专栏目录