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

Question

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

姓名	网址
谷歌	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 来实现，或者如果有另一种更简单的方法，我也准备好了！

任何帮助表示赞赏！

标签： javascripthtmlflask

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 %}