Question

我试图获取除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网址是违规的，还是我需要直接在查询中发布代码？谢谢和最好的问候！

Answer 1

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

Answer 2

它告诉未定义，因为您尝试获取使用.innerHTML获得的文本的 id 属性。而不是var cell = rows[i].cells[j].innerHTML;尝试var cell = rows[i].cells[j].children;。现在，您的单元格变量将包含一系列元素。你可以迭代它们中的每一个并获得它们的id。它可能看起来像这样

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

Answer 3

如果您正在寻找纯粹的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/

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

3 个答案: