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

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

1 голос
/ 09 января 2011

Я использую 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';

1 Ответ

1 голос
/ 09 января 2011

Это хороший шанс представить 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 ()
);
...