Use Greasemonkey to remove table

Question

I am trying to replace a table with my own table using grease monkey. The page that has the table has 2 tables with the same class and no IDs.

I need to replace only the second table (with my own table) and do nothing to the first table. There is nothing that really makes the second table unique from the first table, so the only thing I can think of is trying to add a DIV around the second table, but cant figure it out.

Any ideas? Heres the page code:

<h3>Table 1</h3>
<table class="details" border="1" cellpadding="0" cellspacing="0">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr> 
</tbody></table>

<h3>Table 2</h3>
<table class="details" border="1">
<tbody><tr>
<th>1</th>
<td>2</td>
</tr><tr>
<th>3</th>
<td>4</td>
</tr> 
</tbody></table>

Answer 1

You can use xpath to find the second tables, and do something with it. The xpath expression would be (//table[@class="details"])[2]. Below I added an example which uses (//pre)[1] instead, this will find the first code block on this page, I will hide it as an example. So this hides the page code from your question. (//pre)[2] will hide my script.

See Also here for a tutorial how to use xpath.

// ==UserScript==
// @name           so-test
// @namespace      test
// @include        http://stackoverflow.com/questions/4635696/use-greasemonkey-to-remove-table
// ==/UserScript==

// find first <pre> on this page 
var xpathResult = document.evaluate('(//pre)[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var node=xpathResult.singleNodeValue;

// now hide it :)
node.style.display='none';