使用greasemonkey在表格前添加HTML

发布于 2024-10-10 21:51:33 字数 943 浏览 0 评论 0原文

我正在使用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';

原文

I am using greasemonkey to edit a page. I need to add my own table between the two tables that are already on the page and then remove the second table. There is nothing really setting the two existing tables apart, so I am having trouble with the function to 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>

I have found the below code helpful in removing table 2, but I need to add my own table before table 2 first:

// 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';

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光磨忆 2024-10-17 21:51:33

这是介绍 jQuery 的好机会。 jQuery 对于您的 GM 脚本要做的其他事情非常有用，此外，它非常强大并且具有跨浏览器能力（用于重用您的代码）。

(1) 将此行添加到 Greasemonkey 元数据部分，位于 // @include 指令之后：（

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

请注意，您可能需要卸载并重新安装脚本才能复制 jQuery。）< br>

(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 ()
);

This is a good chance to introduce jQuery. jQuery will be dead useful for the other things your GM script will do, plus, it's robust and cross-browser capable (for reusing your code).

(1) Add this line to the Greasemonkey metadata section, after the // @include directive(s):

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

(Note you may have to uninstall and then reinstall the script to get jQuery copied over.)

(2) Then you can use this code to add your table and delete the old one:

//--- 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 ();
*/

You can see a version of this code, in action, at jsFiddle.

Alternate method of adding your table -- Less straightforward but does not require all the quotes:

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

回复收藏 0 原文

~没有更多了~