Replace specific table values using a Greasemonkey script

Question

This is the first table on the page by the way. I want to be able to change the value of the td elements by referencing their position.

So, if I could state the 3rd td element in a specific table>tr pathway that would be great. And then to replace the text value. The text itself repeats a lot so I can't do a search for specific text values.

Also some of the td values are blank <td> </td>. And I would like to replace the blank table values as well. The tr class names are identical.

<table><tbody>
<tr class="table-header"><td colspan="4"><h3>First</h3></td></tr>

<tr class="table-header">
    <th class="col">Number</th>
    <th class="col">Name</th>
    <th class="col">Quantity</th>
    <th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
    <td>element 1</td>
    <td>element3</td>
    <td>element2</td>
    <td>element3</td>
</tr>
<tr class="left-bottom-border">
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
</tr>
<tr class="left-bottom-border">
    <td>stuff</td>
    <td>stuff</td>
    <td>stuff</td>
    <td>blank</td>
</tr>
<tr class="left-bottom-border">
    <td>I don't</td>
    <td>think this matters</td>
    <td>but I'm going to replace</td>
    <td>all of the data</td>
</tr>

<tr class="table-header"><td colspan="4"><h3>Second Table</h3></td></tr>
<tr class="table-header">
    <th class="col">Number</th>
    <th class="col">Name</th>
    <th class="col">Quantity</th>
    <th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
    <td>More</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr class="left-bottom-border">
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>

<tr class="table-header"><td colspan="4"><h3>Third Table</h3></td></tr>
<tr class="table-header">
    <th class="col">Number</th>
    <th class="col">Name</th>
    <th class="col">Quantity</th>
    <th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
    <td>element 1</td>
    <td>element3</td>
    <td>element2</td>
    <td>element3</td>
</tr>
<tr class="left-bottom-border">
    <td>so more elements</td>
    <td>yada</td>
    <td>yada</td>
    <td>ya</td>
</tr>
<tr class="left-bottom-border">
    <td>x</td>
    <td>y</td>
    <td>z</td>
    <td>aa</td>
</tr>
</tbody></table>

Not sure where you get stuck. Do you know how, in Javascript, to get an array of table cells from a table (if you have the table)? — Mr Lister, Jul 07 '13 at 18:38

score 2 · Answer 1 · answered Jul 09 '13 at 01:34

Use document.querySelector()^Doc to get the table, then use the .rows^Doc and .cells^Doc properties to get a particular <td> (or <th>) cell.

For example, for the code shown in the question, this will change the third row, first column ("element 1"):

var fstTable    = document.querySelector ("body > table:nth-of-type(1)");

fstTable.rows[2].cells[0].textContent = "*changed*";

You can see this code in action at jsFiddle.

To find and replace blank cells, you could use the :empty selector with querySelectorAll -- except that this works poorly in practice due to stray whitespace.

The more robust alternative is to actually check the content of the cells. Like so:

var fstTable    = document.querySelector ("body > table:nth-of-type(1)");
/*-- This only works when there is no stray whitespace:
var emptyCells  = fstTable.querySelectorAll ("td:empty");
*/
var emptyCells  = fstTable.querySelectorAll ("td");

for (var J = emptyCells.length - 1;  J >= 0;  --J) {
    if (emptyCells[J].textContent.trim () == "") {
        emptyCells[J].textContent = "*was blank*";
    }
}

.trim() removes leading and trailing whitespace.

cocco · Answer 2 · 2013-07-09T06:30:23.793

0

this javascript code let's you replace the content of a TD by it's index where 0 is the first element.

var tbl=document.getElementsByTagName("table")[0]; //get the first TABLE

var trs=tbl.getElementsByTagName('tr'); //get all TR's in that table 

var replaceTD=function(TRindex,TDindex,value){
 trs[TRindex].getElementsByTagName('td')[TDindex].innerHTML=value; // replaced with innerText
};

to change the second TD of the first TR that is not a title (so the third)

your indexes will be TRindex=2 cause it starts from 0 ...

and the TDindex=1

and the function you will call is :

replaceTD(2,1,'WHATEVER');

edited Jul 09 '13 at 06:30

answered Jul 07 '13 at 18:39

cocco

16,442
7
62
77

`innerText` is not a valid property. – Brock Adams Jul 09 '13 at 01:36
innerHTML, nodeValue, textContent ... innerText works also. and it's prolly more supported than querySelector – cocco Jul 09 '13 at 06:18
trim & querySelector is also not supported by IE older than 9, innerText does not work in firefox – cocco Jul 09 '13 at 06:32
This is a ***Greasemonkey*** question. That means the browser is Firefox, unless otherwise stated (mis-tagged), and IE does not apply. – Brock Adams Jul 09 '13 at 07:05

Replace specific table values using a Greasemonkey script

2 Answers2