Question

我需要通过TR或firstChild对象访问lastChild个元素，但是使用ID或Name属性似乎不起作用：< / p>

<html>
<body>
<table id="tbl">
<tr name="first" id="first">
    <td>123</td>
    <td>456</td>
</tr>
<tr name="second">
    <td>789</td>
    <td>987</td>
</tr>
</table>
<span id="out"></span>
</body>
</html>

Javascript代码：

var elt=document.getElementById("tbl")
var out=document.getElementById("out")
out.innerHTML="name="+ +elt.firstChild.name+",id="+elt.firstChild.id

输出是：

123 456
789 987
name=NaN,id=undefined

如何修改我的代码以便id或name访问元素？这是实现删除过程所必需的，但只保留标有某些值的子项。

提供了JSFildle https://jsfiddle.net/7594v0kg/13/

Answer 1

拥有<table><tr>实际上无效。浏览器默默地将您的无效HTML更正为<table><tbody><tr>。如果您尝试elt.children[0].nodeName，您会注意到这一点。

另请注意，代码中元素之间的空格计为firstChild - 这就是我在上面使用children[0]的原因。

Answer 2

＆＃13;

var elt=document.getElementById("tbl")
var out=document.getElementById("out")
out.innerHTML="name="+elt.firstElementChild.firstElementChild.getAttribute("name")+
",id="+elt.firstElementChild.firstElementChild.getAttribute("id")

＆＃13;

<table id="tbl">
<tr name="first" id="first">
    <td>123</td>
    <td>456</td>
</tr>
<tr name="second">
    <td>789</td>
    <td>987</td>
</tr>
</table>
<span id="out"></span>

＆＃13;

希望这会对你有所帮助.. :)

Answer 3

您好朋友请尝试使用jquery插件。

out.innerHTML="name="+$(elt).find('tr:first td:first').text()+",id="+$(elt).find('tr:first td:last').text();

这是我找到的解决方案。在给定的小提琴中尝试一次。

＆＃13;

var elt=document.getElementById("tbl")
var out=document.getElementById("out")

out.innerHTML="name="+$(elt).find('tr:first td:first').text()+",id="+$(elt).find('tr:first td:last').text();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table id="tbl">
<tr name="first" id="first">
    <td>123</td>
    <td>456</td>
</tr>
<tr name="second">
    <td>789</td>
    <td>987</td>
</tr>
</table>
<span id="out"></span>
</body>
</html>

＆＃13;

如何在TR元素上设置名称和ID？

3 个答案: