使用下拉列表更改单独表格单元格中的多个值答案

【问题标题】：Using drop-down list to change multiple values in separate table cells使用下拉列表更改单独表格单元格中的多个值
【发布时间】：2019-12-23 04:20:18
【问题描述】：

我有一个包含 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 元素或我需要在这里做的任何事情。任何帮助将不胜感激！

【问题讨论】：

看看this pen。这是你想要的吗？
谢谢！是的，除了在第 2 行和第 3 行更新时的右列之外，它们实际上应该是与第 1 行不同的值。

标签： javascript html css

【解决方案1】：

在您的 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>

【讨论】：

谢谢！我在 '