我有一个包含 3 个"主"单元格的表格(还有 2 个表格嵌套在其中 2 个单元格中;我在单元格周围启用了蓝色边框，以防它在视觉上有所帮助(：类别(顶部，跨越 2 列(、标题/副标题(左列(和结果(右列(。
左列根本不(也不应该(改变。在顶部的"类别"单元格中，有一个下拉列表，我的目标是在选择类别时，它应该更新右列中的所有单元格。
法典：
#tablemobile {
/*width: 100%;*/
}
#tmcategory {
text-align: center;
}
.tmsubtitle {
color: blue;
font-style: italic;
}
.tmtitle {
font-weight: bold;
}
.left {
display: inline-block;
float: left;
}
.right {
display: inline-block;
}
#tablemobile td {
height: 80px;
vertical-align: middle;
padding: 2px;
border: 1px solid blue;
}<form id="tablemobile" action="" method="post">
<table>
<tr>
<td colspan="2" id="tmcategory">
<b>Category:</b>
<select id="columns" onchange="document.getElementById('row1').innerHTML=this.value">
<option value="Result A"> Category 1 </option>
<option value="Result B"> Category 2 </option>
<option value="Result C"> Category 3 </option>
</select>
</td>
</tr>
<tr>
<td>
<table class="left">
<tr>
<td>
<span class="tmtitle">Row 1 Title</span><br><span class="tmsubtitle">Row 1 Subtitle</span>
</td>
</tr>
<tr>
<td>
<span class="tmtitle">Row 2 Title</span><br><span class="tmsubtitle">Row 2 Subtitle</span>
</td>
</tr>
<tr>
<td>
<span class="tmtitle">Row 3 Title</span><br><span class="tmsubtitle">Row 3 Subtitle</span>
</td>
</tr>
</table>
</td>
<td>
<table class="right">
<tr>
<td>
<span id="row1">Result A</span>
</td>
</tr>
<tr>
<td>
<span id="row2">Result D</span>
</td>
</tr>
<tr>
<td>
<span id="row3">Result G</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>我只能完成第一行的此更改，因为我不确定如何添加多个onChange元素或我需要在此处执行的任何操作。任何帮助将不胜感激！
在 html 代码的末尾，在关闭<body>标记之前，插入这个
<script>
document.getElementById('columns').addEventListener("change", function(){
switch(this.value){
case 'Result A':
document.getElementById('row1').innerHTML='A';
document.getElementById('row2').innerHTML='B';
document.getElementById('row3').innerHTML='C';
break;
case 'Result B':
document.getElementById('row1').innerHTML='D';
document.getElementById('row2').innerHTML='E';
document.getElementById('row3').innerHTML='F';
break;
case 'Result C':
document.getElementById('row1').innerHTML='G';
document.getElementById('row2').innerHTML='H';
document.getElementById('row3').innerHTML='I';
break;
}
})
</script>
这在您的情况下很好，但是如果您的脚本更长，建议将其包含在单独的javascript文件中。例如，创建一个像scrpt.js这样的文件，其中包含代码，然后在 html 中插入这样的文件(以防它保存在与 html 文件相同的目录中。
<script src="./scrpt.js"><script>