使用带有动态值的 JS 在 HTML 表中切换文本

Question

我在 Bootstrap 中使用数据表来创建一个表，jinja2 将使用从 Flask 传递的值填充该表，示例如下：

姓名	URL
谷歌	www.google.com
红迪网	www.reddit.com

{% for site in results %}
<tr>
<td>{{ site['sitename'] }}</td>
<td>{{ site['url'] }}</td>
</tr>
{% endfor %}

我也有在结果中传递的site['new_url'] 。 我想让site['url']可点击，并在点击时在site['url']和site['new_url']之间切换。

如果可能的话，我想使用 JS 来实现，或者如果有另一种更简单的方法，我也准备好了！

任何帮助表示赞赏！

Answer 1

一个js解决方案：

{% for site in results %}
<tr>
<td>{{ site['sitename'] }}</td>
<td onclick="swapText()" id="target">{{ site['url'] }}</td>
</tr>
<script>
function swapText() {
  var x = document.getElementById("target");
  if (x.innerHTML === "{{ site['url'] }}") {
    x.innerHTML = "{{ site['new_url'] }}";
  } else {
    x.innerHTML = "{{ site['url'] }}";
  }
}
</script>
{% endfor %}