Используйте greasemonkey, чтобы добавить HTML перед таблицей

Question

Я использую greasemonkey для редактирования страницы. Мне нужно добавить свою таблицу между двумя таблицами, которые уже находятся на странице, а затем удалить вторую таблицу. Нет ничего действительно, чтобы установить две существующие таблицы отдельно, поэтому у меня возникают проблемы с функцией insertBefore.

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

Я нашел следующий код полезным при удалении таблицы 2, но мне нужно, чтобы добавить свою собственную таблицу перед тем таблице 2 первого:

// find second <table> on this page 
var xpathResult = document.evaluate('(//table[@class="details"])[2]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); 
var node=xpathResult.singleNodeValue; 

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

Answer 1

Это хороший шанс представить JQuery. jQuery будет полезен для других вещей, которые сделает ваш GM-скрипт, плюс, он надежный и кросс-браузерный (для повторного использования вашего кода).

(1) Добавить строку в раздел Greasemonkey метаданных, после // @include директивы (ы):

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 

(. Примечание Вы, возможно, придется удалить и переустановить скрипт, чтобы получить JQuery скопирован)

(2) Затем вы можете использовать этот код, чтобы добавить таблицу и удалить старый:

//--- Get the 2nd table with class "details". 
var jSecondTable = $("table.details:eq(1)"); 

//--- Insert my table before it. 
jSecondTable.before 
(
    '<table id="myTable">' 
    + ' <tr>' 
    + '  <th></th>' 
    + '  <th></th>' 
    + ' </tr>' 
    + ' <tr>' 
    + '  <td></td>' 
    + '  <td></td>' 
    + ' </tr>' 
    + '</table>' 
); 

//--- Delete the undesired table. 
jSecondTable.remove(); 

/*--- Alternately, just hide the undesired table. 
jSecondTable.hide(); 
*/ 

Вы можете увидеть версию этого кода в действии по адресу jsFiddle.

---

Альтернативный метод добавления таблицы - менее просты, но не требует, чтобы все цитат:

jSecondTable.before ((<><![CDATA[ 
    <table id="myTable"> 
     <tr> 
      <th></th> 
      <th></th> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
     </tr> 
    </table> 
    ]]></>).toString() 
);