根据在表格上单击的内容填充列表

Question

我是 html 的新手，并且对它有非常非常基本的了解。我正在尝试为我的部门准备一个关于项目视觉效果应该如何工作的小演示。 我基本上想要做的是根据在表格上单击的内容填充一个句子。到目前为止，不幸的是，我只能做资源部分，但没有实现填充和点击功能，也许有人可以提供帮助。

要填充的句子的资源数据是：

<li>Stage 2 phrase: <br/>  “<b>FROM</b> <font color="'#043345">< City 1 ></font> <b>TO</b> <font color="'#043345">< City 2 ></font> <b>VIA</b> <font color="'#043345">< City 3 ></font>”<br/><br/>

该表的资源数据为：

 <br/><table border="1" style="width:100%"><tr>
    <td>Chicago</td>
    <td>Istanbul</td> 
    <td>Budapest</td>
  </tr>
<tr>
    <td>Copenhagen</td>
    <td>Lisbon</td> 
    <td>Sydney</td>
  </tr>
<tr>
    <td>Washington</td>
    <td>Singapore</td> 
    <td>Barcelona</td>
  </tr>
<tr>
    <td>Helsinki</td>
    <td> Next </td> 
    <td> </td>
  </tr>
</table><br/><br/>

我想要做的是将城市名称作为“clickcable”表中的按钮，并在单击后使城市按钮保持特定颜色，具体取决于它是第一次单击、第二次还是第三次单击，例如： 点击的第一个城市将是绿色的 点击的第二个城市将是黄色的 点击的第三个城市将是红色的 当我点击第一个城市时，句子中的第一个占位符（城市 1）应该填充第一个点击的城市。

表格中的下一个按钮应清除所有点击的 3 个城市，并提供再次重新启动的选项。谢谢你的时间！干杯

Answer 1

这是您要找的东西吗？

var cityIter = 0;
var buttons = document.getElementsByTagName('button');
function clickCity(n) {
  switch(cityIter){
    case 0:     
document.getElementById(cityIter).style.backgroundColor = 'green';
      break;
    case 1:
document.getElementById(cityIter).style.backgroundColor = 'yellow';
      break;
    case 2:
document.getElementById(cityIter).style.backgroundColor = 'red';
      break;
  }
  document.getElementById(cityIter).value = buttons[n].innerHTML; 
  cityIter+=1;
}

Here
它相当简单的答案，但仍然希望我能帮助你:)