JavaScript to get value from HTML table cell

Question

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.

Answer 1

You could get by class name as you were attempting however classes are intended to be applied to multiple elements so it returns a node list. You would want to select the node number for the element you wish to get. For example, the first element would be the following:

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

Answer 2

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

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