add HyperLink to <td> in table with javascript

Question

How can I add an hyperlink to a <td> in a dynamic table?

I need the 1st <td> to be an hyperlink to a url + cell value.

Table dynamic creation :

for (var i = 0; i < riskData.length; i++) {
  $("#grdDemo3").append("<tr><td>" + riskData[i].r_id +
    "</td><td>" + riskData[i].r_team + "</td></tr>");
}

And the problem is? Just add the markup for the link like you've done with the table row and the cells. — Andreas
– Andreas, Commented Feb 19, 2020 at 12:38
You should also HTML-encode the team name in case someone puts <script> tags or similar in their team name. Some approaches to do that here: stackoverflow.com/a/7124052/243245, or you could build the entities separately in jQuery and use .text() to set the team name etc. — Rup
– Rup, Commented Feb 19, 2020 at 12:42

Jon · Accepted Answer · 2020-02-19 12:42:04Z

1

Try this

for (var i = 0; i < riskData.length; i++) {
   $("#grdDemo3").append("<tr><td><a href='https://a.com/"+riskData[i].r_id +"'>" +riskData[i].r_id + "</a></td><td>" + riskData[i].r_team + "</td></tr>");

 }

OR

for (var i = 0; i < riskData.length; i++) {
   $("#grdDemo3").append("<tr><td onclick='window.location.href=\"htts://a.com/"+riskData[i].r_id +"\"'>" +riskData[i].r_id + "</td><td>" + riskData[i].r_team + "</td></tr>");

 }

answered Feb 19, 2020 at 12:42

Jon

1342 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Heena Vora · Accepted Answer · 2020-02-19 12:59:41Z

You can always add an anchor tag to td element and make it look like a whole table cell.

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #CCCCCC;
  padding: 12px;
}

table tr td a {
  display: block;
  height: 100%;
  width: 100%;
  background: #F2F2F2;
  text-decoration: none;
}

<table>
  <tr>
    <td>
      <a href="https://www.google.com/"><span>Some Text</span></a>
    </td>
    <td>some content
    </td>
  </tr>
  <tr>
    <td>
      hello here </td>
    <td>some content
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://www.google.com/"><span>Some Text</span></a>
    </td>
    <td>some content
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://www.google.com/"><span>Some Text</span></a>
    </td>
    <td>some content
    </td>
  </tr>
</table>

Collectives™ on Stack Overflow

add HyperLink to <td> in table with javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related