如何獲得Tampermonkey中的表格單元值？

Question

我是Chrome用戶和我想定製一些網站。我有我的Chrome的Tampermonkey（類似於Firefox的Greasemonkey）擴展程序。現在我可以爲特定網站添加一些Javascript代碼。

現在，我只想從某個表中獲取價值並在彈出窗口中顯示它。的HTML代碼

例子：

<div id="Content"> 

<table><tbody><tr> 
<td>Text number 1</td> 
<td>Text number 2</td> 
</tr></tdoby></table> 

<table><tbody><tr> 
<td>Text number 3</td> 
<td>Text number 4</td> 
</tr></tdoby></table> 

<table><tbody><tr> 
<td>Text number 5</td> 
<td>Text number 6</td> 
</tr></tdoby></table> 

</div> 

到目前爲止我的代碼：

var xpath = "id('Content')/table[1]/tbody/tr/td[2]"; 
var result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null); 
myWin=window.open('','','width=400,height=400'); 
myWin.document.write(result); 

，但它並沒有顯示此 「TD」 的內容（文本號2）

任何理念？

Answer 1

我已經根據您提供的XPath創建了您的HTML結構。 既然你不需要的XPath，我會用正常的元素訪問：

HTML

<div id="Content"> 
    <table> 
     <tbody> 
      <tr> 
       <td>Text number 1</td> 
       <td>Text number 2</td> 
      </tr> 
     </tbody> 
    </table> 
    <table> 
     <tbody> 
      <tr> 
       <td>Text number 3</td> 
       <td>Text number 4</td> 
      </tr> 
     </tbody> 
    </table> 
    <table> 
     <tbody> 
      <tr> 
       <td>Text number 5</td> 
       <td>Text number 6</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

的Javascript

var div = document.getElementById('Content'), 
    table = div.getElementsByTagName('table')[1], 
    tr = table.getElementsByTagName('tr')[0], 
    td = tr.getElementsByTagName('td')[1]; 
alert(td.innerHTML); 

工作JSFiddle

Answer 2

這是不是很你如何使用XPath。 result，在這種情況下是iterator。

的代碼會是這樣的：

var xpath = "id('Content')/table[1]/tbody/tr/td[2]"; 
var result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null); 
var node = result.iterateNext(); 
var nodeTxt = node.textContent 
var myWin = window.open('','','width=400,height=400'); 
myWin.document.write (nodeTxt); 

除，不要使用XPath！由於您剛開始使用，請使用document.querySelector或更好的方式使用jQuery。

這裏的CSS selector方式：

var node = document.querySelector (
    "#Content > table:first-child > tbody > tr > td:nth-child(2)" 
); 
var nodeTxt = node.textContent 
alert (nodeTxt); 

注意。使用alert()或jQuery UI對話框來處理這種事情。如果可以幫助，請避免嘗試使用window.open。

這裏的一個完整的腳本，顯示了jQuery的方式：

// ==UserScript== 
// @name  _YOUR_SCRIPT_NAME 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js 
// @grant GM_addStyle 
// ==/UserScript== 
/*- The @grant directive is needed to work around a design change 
    introduced in GM 1.0. It restores the sandbox. 
*/ 
var nodeTxt = $("#Content > table:first > tbody > tr > td:eq(1)").text(); 
alert (nodeTxt);