获取html的table行

最新推荐文章于 2022-09-29 09:58:04 发布

原创最新推荐文章于 2022-09-29 09:58:04 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #table

小知识 - 技术专栏收录该内容

97 篇文章

订阅专栏

本文介绍了一种使用JavaScript操作HTML表格的方法，具体为通过修改特定行的首个单元格内容来实现行选中的视觉效果。代码示例展示了如何利用table的childNodes属性定位并更新表格行。

有如下表格：

<table id="tbLabelList" width="100%" cellpadding="0" cellspacing="0" border="1">
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>

用javascript如下获取一行：

// 当前选中的一行
var g_curSelectRow = null;

function SetSelectRow(newRow)
{
    if (g_curSelectRow != null) {
        // 使选中的状态不再选中
        g_curSelectRow .cells[0].innerText = "";
    }

    var tbLabelListHo = document.getElementById("tbLabelList");
    var childNode = tbLabelListHo.childNodes;

    g_curSelectRow = childNode[0].rows[newRow];;
    g_curSelectRow.cells[0].innerHTML = "this is selected";
}

// 调用：
SetSelectRow(0);    // 选中第一行
SetSelectRow(3);    // 选中第三行

主要是如何获取第几行，采用table的childNodes属性，它似乎只有一个子项，所以固定取其第0个元素，其中就是行(rows)了，然后按照第几行来取就行了