学 JS 碰到的一个问题

2020-07-17 22:17:16 +08:00
 zzybot1996

有这么一个方法:

  function f(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }```
它的调用者是这样的:
`<a href="javascript:void(0);" onclick="f(this)">删除</a>`

我的目的是点击删除,就会删除该链接所在的当前行,问题来了,f()方法里为什么把
`var table = obj.parentNode.parentNode.parentNode;`替换成
`var table = document.getElementsByTagName("table")[0];`时就报错了呢?这个 html 里只有一个 table,这样获取应该没问题吧。。。
907 次点击
所在节点    问与答
4 条回复
zzybot1996
2020-07-17 22:30:26 +08:00
新发现,在 f()中加了这么一行,
`alert(document.getElementsByTagName("table")[0]);`点删除后网页会弹出[object HTMLTableElement]。
改成:
`alert(obj.parentNode.parentNode.parentNode);`点删除后居然弹出的是 null 。。。。
SilentDepth
2020-07-17 23:53:10 +08:00
对于这样一个结构:

<table>
__<tbody>
____<tr>
______<td>
________<a href="..." onclick="...">

<a>.parentNode.parentNode.parentNode 和 document.getElementsByTagName('table')[0] 是同一个元素吗?
zzybot1996
2020-07-18 00:31:11 +08:00
@SilentDepth 我不知道<tbody>是什么。。能跟我大概说说吗?

之后我又用 alert(obj.parentNode.parentNode.parentNode);运行了一下,发现返回的是 TableSectionElement,是不是就是<tbody>呢?

document.getElementsByTagName('table')[0]
返回的是 TableElement
zzybot1996
2020-07-18 00:35:14 +08:00
@SilentDepth 查了一下 tbody,
每个表格可以有一个表头、一个表尾和一个或多个表体,分别以 THEAD 、TFOOT 和 TBODY 元素表示。
用 TBODY 这个标签可以控制表格分行下载,当表格内容很大时比较实用,在需要分行下载处加上<tbody>和</tbody>

大概明白什么意思了,明天再仔细查查,话说我看的视频里面老师都没讲这个。。

感谢您的回复!

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/691011

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX