CODEWITHSUNDEEP
javascripthtml
user1177054
user1177054

Reputation: 39

Using Javascript to update the href link text in a td cell in an onClick call

I have a table as follows:

<table style="width: 100%;">
    <thead>
        <tr>
            <th>Source</th>
            <th>Url</th>
            <th>Referenceid</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td title="12345">12345</td>
            <td title="https://example1.com"><a href="https://example1.com">https://example1.com</a></td>
            <td title="2">2</td>
        </tr>
        <tr>
            <td title="12345">12345</td>
            <td title="https://example2.com"><a href="https://example2.com">https://example2.com</a></td>
            <td title="1">1</td>
        </tr>
    </tbody>
</table>

I am trying to add an onClick handler so when the cell that is an Url gets clicked, it changes the text itself. However I've tried getting the element and then setting it using element.innerText=<a href="https://example1.com>newUrl</a> as well as element.textContent=... and element.innerHtml, however none of them seems to update the url as I expect it (keeping it an <a href> clickable with just updated text (sometimes it turns up as [Object object] and other times it turns up as escaped HTML.

How do I update the text for the <a href> properly in an onClick handler with basic javascript (no jQuery or anything)? Thanks.

Upvotes: 0

Views: 496

Answers (2)

dale landry
dale landry

Reputation: 8610

You can run a forEach() loop on the node list of your <td> elements and target the elements firstChild, use an eventlistener for click to and then change the outerHTML...

I added a class to the table data tags to target the elements. Run the value and index through the forEach loop function and use the index - i to get the event being clicked and the value - v to target the element...

const td = document.querySelectorAll('.td');

td.forEach(function(v, i) {
  td[i].addEventListener('click', function() {
    // `this` can also be used here in substitute with the value passed through the forEach loop
    // this.firstChild.outerHTML = "some new link";
    // The following will change the actual HTML of the TD elements firstChild so the <a> tag will be the 
    // string of HTML defined in the quotes below... 
    v.firstChild.outerHTML = "<a href='stackoverflow.com' target='_blank'>StakOverflow</a>";
  })
})
<table style="width: 100%;">
  <thead>
    <tr>
      <th>Source</th>
      <th>Url</th>
      <th>Referenceid</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example1.com"><a href="#">https://example1.com</a></td>
      <td title="2">2</td>
    </tr>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example2.com"><a href="#">https://example2.com</a></td>
      <td title="1">1</td>
    </tr>
  </tbody>
</table>

NOTE: If you ONLY want to change the text in between the <a> tag, then target the textContent like so...

const td = document.querySelectorAll('.td');

td.forEach(function(v, i) {
  td[i].addEventListener('click', function() {
    this.firstChild.textContent = "StakOverflow";
  })
})
<table style="width: 100%;">
  <thead>
    <tr>
      <th>Source</th>
      <th>Url</th>
      <th>Referenceid</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example1.com"><a href="#">https://example1.com</a></td>
      <td title="2">2</td>
    </tr>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example2.com"><a href="#">https://example2.com</a></td>
      <td title="1">1</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Efraim Jerszurki
Efraim Jerszurki

Reputation: 138

you can create a function on your script.js

something like this

document.querySelector('#yourTd').addEventListener('click', function(){

   document.querySelector('#yourTd').innerHtml = "text you want to show"

}

Upvotes: 0

Related Questions