1

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

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>
4

2 回答 2

2

使用document.querySelector()Doc获取表格，然后使用.rowsDoc和.cellsDoc属性获取特定<td>（或<th>）单元格。

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

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

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

你可以在 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()删除前导和尾随空格。

于 2013-07-09T01:34:20.297 回答
0

这个 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');
于 2013-07-07T18:39:43.617 回答