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

Question

我有一个包含 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 元素或我需要在此处执行的任何操作。任何帮助将不胜感激!

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