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> 

나는 테이블이 제거에 아래의 코드가 도움이 발견,하지만 난 첫 번째 테이블이 전에 내 자신의 테이블을 추가해야합니다

는

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

에서이 코드의 버전을 확인할 수 있습니다.

테이블을 추가

---

다른 방법 - 적은 간단하지만 모든 따옴표를 필요로하지 않습니다

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