greasemonkeyを使用してテーブルの前にHTMLを追加します。

Question

私はgreasemonkeyを使用してページを編集しています。私は既にページ上にある2つのテーブルの間に自分のテーブルを追加し、次に2番目のテーブルを削除する必要があります。既存の2つのテーブルを別々に設定することは実際には何もないので、私は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スクリプトが行う他のものにとっては役に立たなくなります。さらに、（コードを再利用するために）堅牢でクロスブラウザ対応です。 （あなたはアンインストールしてから、jQueryの上書きコピーを取得するためのスクリプトを再インストールする必要があります。）

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

：

（1）// @includeディレクティブ（複数可）の後に、Greasemonkeyのメタデータセクションに次の行を追加します。

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