Issue
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"> </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"> </span> </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"> </span> </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.
Solution
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);
Answered By - Anthony Bird
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.