js生成表格(添加删除)
转载<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 500px;
margin: 50px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
a {
text-decoration: none;
color: #666;
}
#userInfo {
width: 200px;
margin: 50px auto;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="userInfo">
学生姓名:<input type="text" name="" id="name" value=""><br />
学生科目:<input type="text" name="" id="subject" value=""><br />
学生分数:<input type="text" name="" id="score" value=""><br />
<button id="add">添加</button>
</div>
</body>
<script type="text/javascript">
var datas=[{
name:"甲",
subject:"javascript",
score:100
},{
name:"乙",
subject:"javascirpt",
score:99
},{
name:"丙",
subject:"javascript",
score:98
},{
name:"丁",
subject:"javascript",
score:98
},{
name:"酋",
subject:"javascript",
score:98
}];
var tbody=document.querySelector("tbody"); //获取tbody标签
for(var i=0;i<datas.length;i++){ //for遍历数组datas
var tr=document.createElement("tr"); // 创建tr标签
tbody.appendChild(tr); // 添加tr节点标签
for(var k in datas[i]){ // for in 分别取出里面的值
var td=document.createElement("td"); //创建td标签
tr.appendChild(td); // tr内创建td节点 标签
td.innerHTML=datas[i][k]; // 数组遍历出的分别添加到td内
}
var tdd=document.createElement("td"); // 在创建td标签节点
tr.appendChild(tdd);
tdd.innerHTML="<a href='javascript:;'>删除</a>" //td内添加a标签
}
var sc=document.querySelectorAll("a"); //获取所有a标签
for(var j=0;j<sc.length;j++){ //遍历出 a标签
sc[j].onclick=function(){ //为遍历出的a标签添加点击事件
tbody.removeChild(this.parentNode.parentNode); //点击删除当前a标签 父级的父级
}
}
var add=document.getElementById("add");
add.onclick=function(){
var nam=document.getElementById("name").value;
var subject=document.getElementById("subject").value;
var score=document.getElementById("score").value;
var obj = {
name:nam,
subject:subject,
score:score
}
var arr=[]; //创建空数组
arr.push(obj); //将字符串obj添加到数组内
for(var i=0;i<arr.length;i++){ //for循环遍历数组 创建tr
var tr=document.createElement("tr"); // 创建tr标签
tbody.appendChild(tr);
for(var m in arr[i]){
var td=document.createElement("td"); //创建td标签
tr.appendChild(td); // tr内创建td节点 标签
td.innerHTML=arr[i][m];
}
}
var tdd=document.createElement("td"); // 在创建td标签节点
tr.appendChild(tdd);
tdd.innerHTML="<a href='javascript:;'>删除</a>" //td内添加a标签
var sc=document.querySelectorAll("a"); //获取所有a标签
for(var j=0;j<sc.length;j++){ //2遍历出 a标签
sc[j].onclick=function(){ //为遍历出的a标签添加点击事件
tbody.removeChild(this.parentNode.parentNode); //点击删除当前a标签 父级的父级
}
}
}
</script>
</html>
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:c/c++ 常见问题(一)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
js操作表格元素的添加删除实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #form { width: 480px; margin: 30px auto; ...
表格元素的添加删除 javascript Dom html input标签 -
javascript动态添加删除表格
当页面中的按钮被点击时,创建一个包含4列的表格,并将其添加到具有id属性为“box”的元素中。每行包含一个单元格,分别显示用户输入的id、
html 前端 javascript d3 ci -
javascript 删除表格 js批量删除表格的行
沉溺了好几个月了,自从年假回来就一直在忙换工作的事情; 新环境、新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo;闲暇时间我就参照一些代码写了一下, (发现有
javascript 删除表格 js bootstrap 添加行 删除行 -
js动态生成表格
下面用js实现可以生成用户所需行数的表格。 1.首先在body中填入下列代码,获取用户填入的行数值 1 <table> 2 <tr> 3 <td>动态生成表格</td> 4 <td><input id="Cold" type="tex
通用实践 java经验集锦 JavaScript 前端 html