javascript - 使用 Greasemonkey 脚本替换特定的表值

Question

顺便说一句，这是页面上的第一个表格。我希望能够更改 td 的值元素通过引用他们的位置。

所以，如果我能说出第 3 个 td特定元素 table>tr那将是伟大的途径。然后替换文本值。文本本身重复了很多，所以我无法搜索特定的文本值。

还有一些 td 值是空白的 <td> </td> .我也想替换空白表值。 tr类名相同。

<table><tbody>
<tr class="table-header"><td colspan="4"><h3>First</h3></td></tr>

<tr class="table-header">
    <th class="col">Number</th>
    <th class="col">Name</th>
    <th class="col">Quantity</th>
    <th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
    <td>element 1</td>
    <td>element3</td>
    <td>element2</td>
    <td>element3</td>
</tr>
<tr class="left-bottom-border">
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
</tr>
<tr class="left-bottom-border">
    <td>stuff</td>
    <td>stuff</td>
    <td>stuff</td>
    <td>blank</td>
</tr>
<tr class="left-bottom-border">
    <td>I don't</td>
    <td>think this matters</td>
    <td>but I'm going to replace</td>
    <td>all of the data</td>
</tr>

<tr class="table-header"><td colspan="4"><h3>Second Table</h3></td></tr>
<tr class="table-header">
    <th class="col">Number</th>
    <th class="col">Name</th>
    <th class="col">Quantity</th>
    <th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
    <td>More</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>
<tr class="left-bottom-border">
    <td>x</td>
    <td>x</td>
    <td>x</td>
    <td>x</td>
</tr>

<tr class="table-header"><td colspan="4"><h3>Third Table</h3></td></tr>
<tr class="table-header">
    <th class="col">Number</th>
    <th class="col">Name</th>
    <th class="col">Quantity</th>
    <th class="col">Type</th>
</tr>
<tr class="left-bottom-border">
    <td>element 1</td>
    <td>element3</td>
    <td>element2</td>
    <td>element3</td>
</tr>
<tr class="left-bottom-border">
    <td>so more elements</td>
    <td>yada</td>
    <td>yada</td>
    <td>ya</td>
</tr>
<tr class="left-bottom-border">
    <td>x</td>
    <td>y</td>
    <td>z</td>
    <td>aa</td>
</tr>
</tbody></table>

Answer 1

使用 document.querySelector() ^Doc获取表格，然后使用 .rows ^Doc和 .cells ^Doc获得特定的属性 <td> (或 <th> )单元格。

例如，对于问题中显示的代码，这将更改第三行第一列(“元素 1”):

var fstTable    = document.querySelector ("body > table:nth-of-type(1)");

fstTable.rows[2].cells[0].textContent = "*changed*";

您可以 see this code in action at jsFiddle .

---

要查找和替换空白单元格，您可以使用:empty选择器 querySelectorAll -- 除了由于杂散的空白，这在实践中效果不佳。

更可靠的替代方法是实际检查单元格的内容。像这样:

var fstTable    = document.querySelector ("body > table:nth-of-type(1)");
/*-- This only works when there is no stray whitespace:
var emptyCells  = fstTable.querySelectorAll ("td:empty");
*/
var emptyCells  = fstTable.querySelectorAll ("td");

for (var J = emptyCells.length - 1;  J >= 0;  --J) {
    if (emptyCells[J].textContent.trim () == "") {
        emptyCells[J].textContent = "*was blank*";
    }
}

.trim()删除前导和尾随空格。