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;}p { 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='https://www.haobala.com/wenda/4568.html#'>删除</a></td></tr><tr> <td>B</td> <td>11</td> <td>女</td> <td><a href='https://www.haobala.com/wenda/4568.html#'>删除</a></td></tr><tr> <td>C</td> <td>23</td> <td>男</td> <td><a href='https://www.haobala.com/wenda/4568.html#'>删除</a></td></tr> </table> <input type='button' name='name' value='添加' /> <p><p>姓名：<input type='text' placeholder='请输入姓名' /></p><p>年龄：<input type='text' placeholder='请输入年龄' /></p><p>性别：<input type='text' placeholder='请输入性别' /></p><p><input type='button' value='添加' /></p> </p></body></html><script> //取出所有的A标签 var aTags = document.getElementsByTagName(’a’); //给取出的A绑定点击事件 deleteTr(aTags); var input = document.getElementById(’input’); input.onclick = function () {var p = document.getElementsByTagName(’p’);p[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='https://www.haobala.com/wenda/4568.html#'>删除</a></td>';tr.innerHTML = html;var p = document.getElementsByTagName(’p’);p[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>
问题解答
回答1：会自动在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>回答2：
你可能是dom的层级没有搞清 tr并不是table的子元素 上面修改了答案可以简单实现你要的功能 你参考一下
网公网安备