获取表中的下一行 - javascript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6583352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 21:11:27  来源:igfitidea点击:

get the next row in a table-javascript

javascript

提问by samach

how wud u get the next row in the following example? (i am trying to print the next three row/column values of the rowId provided)

在以下示例中,您如何获得下一行?(我正在尝试打印提供的 rowId 的下三行/列值)

function printRowData(rowId)
{
    var row=document.getElementById(rowId);
    for(i=0; i<3 ; i++)
    {
        var column=row.getElementsByTagName("td");
        alert(column[0].innerText);

        //now i want to move to the next row...something like row=row.next()?????
     }

}

回答by user113716

If you just want the next row, and not subsequent rows, you can do this:

如果你只想要下一行,而不是后续行,你可以这样做:

var next = row.parentNode.rows[ row.rowIndex + 1 ];

So your code could look like this:

所以你的代码可能是这样的:

function printRowData(rowId) {
    var row=document.getElementById(rowId);
    var idx = row.rowIndex;
    for(i=0; i<4 ; i++) {
        if( row ) {
            alert(row.cells[0].innerText);
           var row = row.parentNode.rows[ ++idx ];
        }
    }
}

From the current row, it gets the .parentNode, then from that, it accesses the rowscollection, and increments the .rowIndexproperty of the original row to select the next.

它从当前行获取.parentNode,然后从中访问rows集合,并增加.rowIndex原始行的属性以选择下一行。

This takes care of white space issues.

这可以解决空白问题。

Notice also that instead of getElementsByTagName, I replaced it with row.cells, which is a collection of the cells in the row.

另请注意getElementsByTagName,我将其替换为row.cells,它是行中单元格的集合。



EDIT:Forgot to include the rowsproperty after parentNode. It was included in the description though. Fixed.

编辑:忘记rowsparentNode. 虽然它包含在描述中。固定的。

回答by Matt McCabe

To get around the problems with whitespace you can now use

要解决空白的问题,您现在可以使用

row = row.nextElementSibling

Just make sure to check for null when you get to the end of the table, or if you have a thead, tbodyor tfootit will be at the end of that particular node.

只需确保在到达表末尾时检查 null,或者如果您有thead,tbody或者tfoot它将位于该特定节点的末尾。

If you're supporting older browsers you may want to use a shim.

如果您支持较旧的浏览器,则可能需要使用垫片。

回答by Ates Goral

Try using the nextSiblingproperty:

尝试使用该nextSibling属性:

row = row.nextSibling

But note that whitespace in your source HTML may turn into text nodes among the rows. You may have to call nextSiblingmore than once to skip the text nodes.

但请注意,源 HTML 中的空格可能会变成行之间的文本节点。您可能需要多次调用nextSibling才能跳过文本节点。

Have you considered using jQuery? With jQuery, you don't have to worry about the text nodes:

你考虑过使用 jQuery 吗?使用 jQuery,您不必担心文本节点:

row = $("#" + rowId);
...
row = row.next();

回答by marchaos

row = row.nextSibling. You might need to do that in a while loop as you may come across whitespace nodes, so you should check to see if the next node has the correct tagName.

row = row.nextSibling. 您可能需要在 while 循环中执行此操作,因为您可能会遇到空白节点,因此您应该检查下一个节点是否具有正确的 tagName。

回答by Saeed Neamati

If you can use jQuery, then it's becoming really easy.

如果您可以使用 jQuery,那么它就会变得非常容易。

row.next();

回答by Sandeep Manne

Use document.getElementById(rowId).nextSibling

利用 document.getElementById(rowId).nextSibling