Question

我 Chrome 用户，我想自定义某个网站。我的Chrome有 Tampermonkey （类似于Greasemonkey for Firefox）扩展程序。现在我可以为特定网站添加一些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的方式。 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);

Answer 2

我已根据您提供的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

如何在Tampermonkey中获取表格单元格值？

2 个答案: