获取html的table行

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

red-fly

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

阅读量2.6k

点赞数

分类专栏：小知识 - 技术文章标签： html javascript table

本文链接：https://blog.csdn.net/jszj/article/details/106939977

版权

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

86 篇文章 1 订阅

订阅专栏

有如下表格：

<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)了，然后按照第几行来取就行了