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

Question

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

待填充句子的资源数据为：

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

table 的资源数据是：

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

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

table 中的下一个按钮应清除所有单击的 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
答案很简单，但还是希望能帮到你:)

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

Populating a list depending on what is clicked on a table

html

button

click

populate