JavaScript 从 HTML 表格单元格中获取值

Question

我正在尝试从多行、多列 html 表中提取文本。 表中的一列定义如下。 所有 id 值都是动态的，因此我需要引用其他属性或标签来获取它。 我在这里尝试获取的值是“PERS”。 它是唯一包含文本的单元格。

<table id="tableview-1033-record-2154" data-boundview="tableview-1033" data-recordid="2154" data-recordindex="0"
    class="x-grid-item" cellpadding="0" cellspacing="0" style=";width:0">
    <tbody>
        <tr class="  x-grid-row">
            <td class="x-grid-cell x-grid-td x-grid-cell-TIMM103-Block-2-colstate-ResourceType-0 x-grid-cell-first x-unselectable vux-grid-cell-selected"
                style="width:96px;" tabindex="-1" data-columnid="TIMM103-Block-2-colstate-ResourceType-0"
                id="ext-element-1962">
                <div unselectable="on" class="x-grid-cell-inner " style="" id="ext-element-1841"><span
                        class="vux-glyph-font-icon vux-font-icon-grey vux-font-icon-xx-small vux-grid-field-menu-icon vux-font-icon-hidden"
                        colindex="0" rowindex="0" id="ext-element-1996">&nbsp;</span>PERS</div>
            </td>
            <td class="x-grid-cell x-grid-td x-grid-cell-TIMM103-Block-2-colstate-ResourceCode-0 x-unselectable grid-cell-error-input"
                style="width:96px;" tabindex="-1" data-columnid="TIMM103-Block-2-colstate-ResourceCode-0"
                id="ext-element-1838">
                <div unselectable="on" class="x-grid-cell-inner " style="" id="ext-element-1842"><span
                        class="vux-glyph-font-icon vux-font-icon-grey vux-font-icon-xx-small vux-grid-field-menu-icon vux-font-icon-hidden"
                        colindex="1" rowindex="0" id="ext-element-1971">&nbsp;</span>&nbsp;</div>
            </td>
            <td class="x-grid-cell x-grid-td x-grid-cell-TIMM103-Block-2-colstate-StaffRequired-0 x-unselectable grid-cell-error-input"
                style="width:204px;" tabindex="-1" data-columnid="TIMM103-Block-2-colstate-StaffRequired-0"
                id="ext-element-1839">
                <div unselectable="on" class="x-grid-cell-inner " style="text-align:right;" id="ext-element-1843"><span
                        class="vux-glyph-font-icon vux-font-icon-grey vux-font-icon-xx-small vux-grid-field-menu-icon vux-font-icon-hidden"
                        colindex="2" rowindex="0" id="ext-element-1969">&nbsp;</span>&nbsp;</div>
            </td>

我期待这能奏效，但没有这样的运气......

  var input1rw = document.getElementsByClassName('x-grid-cell x-grid-td x-grid-cell-TIMM103-Block-2-colstate-ResourceCode-0 grid-cell-error-input x-unselectable');
  var input1cl = input1rw[0];
  console.log('result: ', input1cl.innerText);

经过几个小时的失败，我非常感谢专家的帮助。

Answer 1

您可以在尝试时通过 class 名称获得，但是类旨在应用于多个元素，因此它返回一个节点列表。 您可能希望 select 是您希望获取的元素的节点号。 例如，第一个元素如下：

var elements = document.getElementsByClassName('x-grid-cell-inner');
var single = elements[0].textContent.trim();
alert('the value is:' + single);

Answer 2

因为 ID 是动态的，但表总是在同一个地方，所以我使用以下方法获取值：

var tblID = document.getElementsByTagName("table")[15].id;
var tr = document.querySelector('#' + tblID).querySelectorAll('tr')[0];
var div = tr.querySelectorAll('td')[0].querySelector('div').childNodes[1].textContent;
console.log(div);

Answer 3

function GetCellValues() {
  var table = document.getElementById('mytable');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) 
        {
            alert(table.rows[r].cells[c].innerHTML);
        }
    }
}