使用帶有動態值的 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 %}