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);
        }
    }
}