文章詳情頁

javascript - 添加一個tr標簽到table標簽里，在控制臺顯示table標簽時，有2個子元素？我想要的是tr標簽包含到table標簽里面

瀏覽：106日期：2023-04-02 08:05:23

問題描述

<!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='http://www.cgvv.com.cn/wenda/4568.html#'>刪除</a></td></tr><tr> <td>B</td> <td>11</td> <td>女</td> <td><a href='http://www.cgvv.com.cn/wenda/4568.html#'>刪除</a></td></tr><tr> <td>C</td> <td>23</td> <td>男</td> <td><a href='http://www.cgvv.com.cn/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='http://www.cgvv.com.cn/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的子元素上面修改了答案可以簡單實現你要的功能你參考一下