Question

长话短说我正在制作一个油脂单脚本。我处理的页面具有此特定表，具有各种值，具体取决于页面。

<table class="billing dead">
    <tbody>
        <tr>
            <th>Index:</th>
            <td>Long alpha numeric value here</td>
        </tr>
        <tr>
            <th>Status:</th>
            <td class="status">This text is red to denote urgency.</td>
        </tr>
    </tbody>
</table><!-- end billing dead -->

我需要做的是将“索引：”文本更改为其他内容，无论是按钮还是链接，具体取决于具体情况。我只是很难通过Javascript找到项目。

环顾四周，我发现了这个：How to Get Element By Class in JavaScript?，它为我提供了这段代码：

function replaceContentInContainer(matchClass,content)
{
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems)
    {
        if((" " + elems[i].className + " ").indexOf(" " + matchClass + " ") > -1)
        {
            elems[i].innerHTML = content;
        }
    }
}

取代整个表格，但这是我最接近的问题/答案;这不太对劲。一旦我找到了上面链接的方法的表，有没有办法访问该特定表的元素？我试过任意改变

elems[i].innerHTML = content;

进入

elems[i][0].innerHTML = content;

它很快告诉我elems[i]不是节点的节点。有没有一种简单的方法来做我正在寻找的东西？

Answer 1

document.querySelector('.billing.dead > tbody > tr > th')
        .firstChild
        .data = "new value";

Answer 2

效果很好。这是demo。

replaceContentInContainer('status', 'hello');

Answer 3

是否有多个“结算”表？每个只有一个“索引”并且它始终是第一行吗？

以下完整脚本显示了如何更改有关任何/所有“索引”行的HTML，包括激活生成的按钮。它使用jQuery，这将为您节省大量时间和精力。

See the base code in action at jsFiddle.

// ==UserScript==
// @name     _Buttonize the Index cells
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

//--- Find all the "Index" headers.
var indexHdrs   = $("table.billing.dead th:contains(Index)");

//--- Wrap them all in a button, for example.
indexHdrs.each ( function () {
    $(this).wrapInner ('<button class="myButton" />');
} );

/*--- Activate the buttons.  In this case they just display matching
    cell contents.
*/
$("table.billing.dead th button.myButton").click ( function () {
    var jThis           = $(this);  //-- The button that was clicked.
    var matchingCell    = jThis.parent ().next ();
    alert (matchingCell.text () );
} );

注意：要在Chrome上使用此脚本，请安装the Tampermonkey extension - 无论如何都需要执行此操作，以获取额外功能，并克服Chrome对用户脚本安装的待定限制。

通过元素的Javascript，替换表的单个部分

3 个答案: