Question

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

所以，如果我可以说明特定td路径中的第3个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()删除了前导空格和尾随空格。

Answer 2

这个javascript代码让你用它的索引替换TD的内容，其中0是第一个元素。

var tbl=document.getElementsByTagName("table")[0]; //get the first TABLE

var trs=tbl.getElementsByTagName('tr'); //get all TR's in that table 

var replaceTD=function(TRindex,TDindex,value){
 trs[TRindex].getElementsByTagName('td')[TDindex].innerHTML=value; // replaced with innerText
};

更改第一个不是标题的TR的第二个TD（所以第三个）

你的索引将是TRindex = 2，因为它从0开始......

和TDindex = 1

，您将调用的功能是：

replaceTD(2,1,'WHATEVER');

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

2 个答案: