'JavaScript to get value from HTML table cell

I'm trying to extract the text from a multi-row, multi-column html table. A column from the table is defined below. All the id values are dynamic so I'll need to reference other attributes or tags to fetch it. The value I'm trying to fetch here is "PERS". It is the only cell containing text.

<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>

I was expecting this to work but no such luck ...

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

After several hours of failure, I'd greatly appreciate some help from the experts.

javascripthtml


Solution 1:[1]

Because the IDs were dynamic but the table would always be in the same place, I used the following to get the value:

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 puckhead
Solution 2

Related Questions