在 html 表中，使用 jQuery 将每个数据行的第一个单元格更改为第 < 个 scope= "row" >，而不是<td>元素？

Question

我正在尝试使用 jQuery 更改 HTML 表每行中的第一个单元格，以便它不再是<td>元素，而是<th scope="row">。使用 d3 生成的完整表在此 Plunker 中可用。 以下为摘录：

<tbody>
<tr>
<td>Total</td>
<td>36,000</td>
<td>6,118</td>
<td>5,034</td>
<td>5,496</td>
</tr>
<tr>
<td>Percent_patients</td>
<td>100</td>
<td>16.8</td>
<td>13.8</td>
<td>15.1</td>
</tr>
</tbody>

我想做的是让它像这样：

<tbody>
<tr>
<th scope="row">Total</th>
<td>36,000</td>
<td>6,118</td>
<td>5,034</td>
<td>5,496</td>
</tr>
<tr>
<th scope="row">Percent_patients</th>
<td>100</td>
<td>16.8</td>
<td>13.8</td>
<td>15.1</td>
</tr>
</tbody>

我试图在SO上遵循类似的例子，但是即使是第一步我也遇到了麻烦，即选择每行的第一个单元格(并更改有关它的任何内容(。例如，我尝试添加$("#switchable-table tr td:first-child").addClass("black");，但这似乎没有注册。

有人能够根据我的 Plunker 演示解决方案吗？

Answer 1

这是d3方法。你不需要使用jQuery。

1. 从您附加的td中取下d.index。
2. 使用其他选择追加d.index。

相关代码：

trs.selectAll('th')
.data(function (d) { return [d.index]; })
.enter()
.append('th')
.attr('scope', 'row')
.text(function (d) { return d; });

这是更新的Plunkr：

http://plnkr.co/edit/JKaSXMiegsPdmv3fBVOK?p=preview

此外，在将data绑定到td的步骤中，您可以将其替换为已经具有所有必要标头headers数组。这里：

trs.selectAll('td')
.data(function(d){ return headers.map(function(key) { return d[key];}); })

希望这有帮助。

Answer 2

"我正在尝试使用 jQuery 更改 HTML 表每行中的第一个单元格，以便它不再是<td> element而是<th scope="row">" - 虽然你可以在事后更改它，但你为什么要这样做？与其在事后更改元素，不如先附加第 th 个元素。

在这里，您可以为每一行附加 td 元素：

trs.selectAll('td')
.data(function(d){ return [d.index, d['Total'],   d['PRIMARY Alcohol only'],  d['Alcohol with secondary drug'],   d['Heroin'],    d['Other opiates'], d['Cocaine (smoked)'],  d['Cocaine (other route)'], d['Marijuana'], d['Amphetamines'],  d['Other stimulants'],  d['Tranquilizers'], d['Sedatives'], d['Hallucinogens'], d['PCP'],   d['Inhalants'], d['Other/Unknown']]; })
.enter()
.append('td')
.text(function(d){
return d;
});

而是附加 th，然后通过输入周期进入其余的 tds：

trs.append("th")
.text(function(d) { return d.index; })
.attr("scope","row")
trs.selectAll('td')
.data(function(d){ return [d['Total'],    d['PRIMARY Alcohol only'],  d['Alcohol with secondary drug'],   d['Heroin'],    d['Other opiates'], d['Cocaine (smoked)'],  d['Cocaine (other route)'], d['Marijuana'], d['Amphetamines'],  d['Other stimulants'],  d['Tranquilizers'], d['Sedatives'], d['Hallucinogens'], d['PCP'],   d['Inhalants'], d['Other/Unknown']]; })
.enter()
.append('td')
.text(function(d){
return d;
});

更新的普伦克

Answer 3

若要选择每行中的第一个单元格，请使用:first-child选择器，因为您知道第一个子单元格将是单元格。你说这行不通，但它确实行得通(如果我假设你id="switchable-table"在桌面上(。:-)也许您过早地运行了$(...)函数：将script标签放在文档的最后，就在结束</body>标签之前。

要将一个元素替换为另一个元素，请使用replaceWith.

所以：

$("#switchable-table tr td:first-child").replaceWith('<th scope="row"></th>');

它足够聪明，可以单独替换每个元素。

$("#switchable-table tr td:first-child").replaceWith('<th scope="row"></th>');

<table id="switchable-table">
<tbody>
<tr>
<td>Total</td>
<td>36,000</td>
<td>6,118</td>
<td>5,034</td>
<td>5,496</td>
</tr>
<tr>
<td>Percent_patients</td>
<td>100</td>
<td>16.8</td>
<td>13.8</td>
<td>15.1</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

例如，我尝试添加 $("#switchable-table tr td：first-child"(.addClass("black"(;

可切换表不是一个 ID，它是一个类，所以...

$(".switchable-table tr td:first-child").addClass("black");