javascript - 使用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 ()
);