如何访问HTML表中元素的属性

How do you access properties of elements within an HTML table?

本文关键字：元素 属性 HTML 何访问 访问      更新时间：2023-09-26

我试图获取除了TR和TD之外的html元素，并获取它们的ID属性。奇怪的是，当我试图使用alert函数通过document.getElementById（"someId"）获取元素时，会出现一些东西。但当我捕获元素并使用对id的直接调用时，它会告诉undefined。

这是我在JSFiddle中的代码http://jsfiddle.net/ss7ykqyh/

示例HTML：

    <tr>
        <td> <input id="button1" /> </td>
        <td> <input id="button2" /> </td>
    </tr>
    <tr>
        <td> <input id="button3" /> </td>
        <td> <input id="button4" /> </td>
    </tr>
</table>

<input value="clone me!" type="button" id="btnCloneMe" onclick="myFunction()" />

我的脚本：

function myFunction() {
    var table = document.getElementById("table1");
    var rows = table.rows;

    for(var i = 0; i < rows.length; i++){
        var noOfCells = rows[i].cells.length;
        alert("no of cells: " + noOfCells);
        for(var j = 0; j < noOfCells; j++){
            var cell = rows[i].cells[j].innerHTML;
            alert("inside cell: " + cell.id);
            var element = document.getElementById("button1");
            alert(element.id);
        }
    }

}

这是一种方法，我也在考虑是否有更好的方法来捕获除TD和TR 之外的所有html元素

此外，仅仅发布JSFiddle url是违法的，还是我需要直接在查询中发布代码？谢谢并致以最良好的问候！

innerHTML返回一个字符串，而不是对象，因此它没有ID属性

var cell = rows[i].cells[j].innerHTML;
alert("inside cell: " + cell.id);

看看cell是一个字符串

你可以删除innerHTML调用，但单元格没有ID？

var cell = rows[i].cells[j]; // returns empty string ?

我猜你想要按钮的ID，然后你必须先找到它们，一种方法是使用querySelector

var cell = rows[i].cells[j].querySelector('input');

FIDDLE

这说明未定义，因为您正试图获取用.innerHTML获得的文本的属性id。请尝试var cell = rows[i].cells[j].children;，而不是var cell = rows[i].cells[j].innerHTML;。现在，您的单元格变量将包含一个元素数组。你可以遍历它们中的每一个并获得它们的id。它可能看起来像这个

var cell = rows[i].cells[j].children;
for (var k = 0; k < cell.length; k++) {
    alert("inside cell: " + cell[k].id);
}

如果你正在寻找纯Js解决方案，那么试试这个

function myFunction() {
    var elems= document.querySelectorAll('table tr td input');
    for (var i = 0;i<elems.length;i++)
    {
        debugger;
        alert(elems[i].id);             
    }
}

http://jsfiddle.net/ss7ykqyh/5/

相关文章：