我正在尝试创建一个产品比较表，用户可以单击按钮来显示/隐藏其他规格详细信息。
我读到你不能用重复的 id 来做到这一点，但我在尝试按类别选择时遇到了麻烦。
发布的代码是迄今为止我最接近的尝试。
function toggleTable()
{
if( document.getElementById("hide").style.display=='none' ){
document.getElementById("hide").style.display = 'table-row'; // set to table-row instead of an empty string
}else{
document.getElementById("hide").style.display = 'none';
}
}
<body>
<h2>Table</h2>
<div>
<table>
<tbody>
<tr>
<td>Blank</td>
<td>Info</td>
</tr>
<tr>
<td>Blank</td>
<td>Info</td>
</tr>
<tr id="hide" style="display:none;">
<td>Show/Hide</td>
<td>Info</td>
</tr>
<tr id="hide" style="display:none;">
<td>Show/Hide</td>
<td>Info</td>
</tr>
</tbody>
</table>
</div>
<button type="button" onclick="toggleTable()">Show/Hide ▼</button>
</body>
正如您提到的，不要多次使用同一个 ID 始终是一个好习惯。所以我制作了一个版本，将您的 Html 标记标识符从 ID 替换为使用类。
添加了与代码内联的注释，以便您理解。在您的情况下，由于您要选择多个项目，因此明智的做法是将它们放入列表中并逐一迭代以应用属性。
function toggleTable()
{
var list = document.getElementsByClassName("hide"); // Since there are more than one item, lets park it into a list
for(var i=0;i<list.length;i++) // iterating thru a list so apply it to individual items
{
if( list[i].style.display =='none'){
list[i].style.display = 'table-row'; // set to table-row instead of an empty string
}else{
list[i].style.display = 'none';
}
}
}<h2>Table</h2>
<div>
<table>
<tbody>
<tr>
<td>Blank</td>
<td>Info</td>
</tr>
<tr>
<td>Blank</td>
<td>Info</td>
</tr>
<tr class="hide" style="display:none;">
<td>Show/Hide</td>
<td>Info</td>
</tr>
<tr Class="hide" style="display:none;">
<td>Show/Hide</td>
<td>Info</td>
</tr>
</tbody>
</table>
</div>
<button type="button" onclick="toggleTable()">Show/Hide ▼</button>