为啥我添加的行与列没有table的边框呢？-慕课网

首页课程实战体系课手记专栏慕课教程

为啥我添加的行与列没有table的边框呢？

来源：9-22 编程练习

等風來丶

2016-01-07 15:32

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改

}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

function add()

{

var j=1;

var y=document.createElement("tr");

var z1=document.createElement("tb");

z1.innerHTML="xh00"+j;

var z2=document.createElement("tb");

z2.innerHTML="唐嫣"+j+"号";

var z3=document.createElement("tb");

z3.innerHTML="<a href='javascript:;' onclick='datle(this)'>删除</a>";

var x=document.getElementById("table");

x.appendChild(y);

y.appendChild(z1);

y.appendChild(z2);

y.appendChild(z3);

}

// 创建删除函数

function datle(th)

{

var x=th.parentNode.parentNode;

x.parentNode.removeChild(x);

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

写回答关注

2回答

伊望岁月: 2016-01-07 15:46:08

你对新加的行和列审查元素会发现，新加的行和列加到了tbody的外面，这是因为表格生成的时候会自动加上tbody标签包着行和列，而你用table标签操作节点，所以不对

<tbody><tr>
    <th>学号</th>
    <th>姓名</th>
    <th>操作</th>
     </tr>
     <tr>
    <td>xh001</td>
    <td>王小明</td>
    <td><a href="javascript:;" onclick="datle(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
     </tr>
     <tr>
    <td>xh002</td>
    <td>刘小芳</td>
    <td><a href="javascript:;" onclick="datle(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
     </tr>
</tbody>
<tr><tb>xh001</tb><tb>唐嫣1号</tb><tb><a href="javascript:;" onclick="datle(this)">删除</a></tb></tr>

5 0

伊望岁月回复Aeejay

麻烦贴一下代码，应该没问题的，测试过得

2016-01-11 09:24:26

共 5 条回复 >