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

Question

I'm using a datatable in Bootstrap to create a table which jinja2 will populate with values passed from Flask, example below:

Name	URL
google	www.google.com
reddit	www.reddit.com

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

I also have site['new_url'] which is passed in results. I want to make the site['url'] clickable and have that toggle between site['url'] and site['new_url'] when clicked.

I'd like to implement using JS if possible or if there is another easier way I'm up for that too!

Any help is appreciated!

Answer 1

A Js solution:

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