javascript - 添加一个tr标签到table标签里，在控制台显示table标签时，有2个子元素？我想要的是tr标签包含到table标签里面
本文介绍了javascript - 添加一个tr标签到table标签里，在控制台显示table标签时，有2个子元素？我想要的是tr标签包含到table标签里面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<title></title>
<mata http-equiv=content-type content=text/html; charset=gb2312 />
<style type="text/css">
#table1 {
margin: 0 auto;
border: 1px solid gray;
}
#table1 td {
border: 1px solid gray;
height: 60px;
width: 120px;
text-align: center;
line-height: 60px;
}
#table1 tr:hover {
background: #efe5e5;
}
#table1 .delete:hover {
background: #ff6a00;
}
#input {
height: 100px;
width: 200px;
margin: 20px auto;
font-size: 50px;
display: block;
}
div {
width: 250px;
margin: 0 auto;
display: none;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<td>姓名</td>
<td>年纪</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>A</td>
<td>21</td>
<td>男</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>B</td>
<td>11</td>
<td>女</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>C</td>
<td>23</td>
<td>男</td>
<td><a href="#">删除</a></td>
</tr>
</table>
<input id="input" type="button" name="name" value="添加" />
<div>
<p>姓名：<input id="name" type="text" placeholder="请输入姓名" /></p>
<p>年龄：<input id="age" type="text" placeholder="请输入年龄" /></p>
<p>性别：<input id="gender" type="text" placeholder="请输入性别" /></p>
<p><input id="add" type="button" value="添加" /></p>
</div>
</body>
</html>
<script>
//取出所有的A标签
var aTags = document.getElementsByTagName('a');
//给取出的A绑定点击事件
deleteTr(aTags);
var input = document.getElementById('input');
input.onclick = function () {
var div = document.getElementsByTagName('div');
div[0].style.display = "block";
}
var add = document.getElementById('add');
add.onclick = function () {
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var tr = document.createElement('tr');
var html = "<td>" + name + "</td><td>" + age + "</td><td>" + gender + "</td><td><a href=\"#\">删除</a></td>";
tr.innerHTML = html;
var div = document.getElementsByTagName('div');
div[0].style.display = "none";
var table1 = document.getElementById('table1');
table1.appendChild(tr)
;
var allTr = table1.getElementsByTagName('tr');
console.log(allTr.length)
console.log(table1);//为什么取出开的table1里面有2个子元素，我想要的是一个子元素，tr标签包含到table标签里面
//if (tr.length > 6) {
//}
deleteTr(aTags);
}
function deleteTr(tag) {
for (var i = 0; i < aTags.length; i++) {
tag[i].onclick = function () {
//判断是否确定要删除
if (confirm('确定要删除我？')) {
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
}
}
</script>解决方案
会自动在tr和table间渲染上一层tbody标签 你F12看下不就知道了
<table>
<tr>
<td>111</td>
<td>删除</td>
</tr>
</table>
<script>
const td = document.getElementsByTagName('td')[1];
td.onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
}<
/script>这篇关于javascript - 添加一个tr标签到table标签里，在控制台显示table标签时，有2个子元素？我想要的是tr标签包含到table标签里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
