How to add a hyperlink column to a table using jquery?

Question

I am building an HTML table (with 4 columns) using below jquery. I already added 3 columns.

How do i add a fourth column to the table in the function below. Column is hyperlink with values from the first 3 columns of the table?

Expected format of column four :

<table style="width:100%">
  <tr>
    <td>COLUMN1</td>
    <td>COLUMN2</td> 
    <td>COLUMN3</td>
    <td>COLUMN4</td>
  </tr>
  <tr>
    <td>A1</td> 
    <td>B1</td>
    <td>C1</td>
    <td>www.yahoo.com?q1=A1&q2=B1&q3=C1</td>
  </tr>
  
  <tr>
    <td>A2</td> 
    <td>B2</td>
    <td>C2</td>
    <td>www.yahoo.com?q1=A2&q2=B2&q3=C2</td>
  </tr>
  <tr>
    <td>A3</td> 
    <td>B3</td>
    <td>C3</td>
    <td>www.yahoo.com?q1=A3&q2=B3&q3=C3</td>
  </tr>
  
  
</table>

Here is my my function?

function testFunction(data, status, jqXHR) {
    var testObj = data;
    var tempurl= "www.yahoo.ccom";
    var table = $("#IdTab");
    $.each(testObj.childData, function (i, n) {
        var rootmyVal = n.myVal1;
        $.each(n, function (e, r) {
            table.append("<tr><td>" + rootmyVal + "</td><td>" + r.myVal1 + "</td><td>" + r.myVal2 + "</td></tr>");          
        });
    });
}

score 0 · Accepted Answer · answered Nov 29 '15 at 13:31

0

Very simple. The same way, use <a> tag:

function testFunction(data, status, jqXHR) {
    var testObj = data;
    var tempurl= "www.yahoo.ccom";
    var table = $("#IdTab");
    $.each(testObj.childData, function (i, n) {
        var rootmyVal = n.myVal1;
        $.each(n, function (e, r) {
            table.append("<tr><td>" + rootmyVal + "</td><td>" + r.myVal1 + "</td><td>" + r.myVal2 + "</td><td><a href='http://" + tempurl + "'>" + tempurl + "</a></td></tr>");          
        });
    });
}

Also, it looks like the url is just www.yahoo.com, without the http:// protocol. Please ensure you add that before. Since you haven't provided the full data, I am unable to create a snippet or fiddle.

answered Nov 29 '15 at 13:31

Praveen Kumar Purushothaman

164,888
24
203
252

Thanks praveen. your suggestion is working but if i hove on the link in the webpage, only 266 characters of my url are being displayed. any thoughts? – josh Nov 30 '15 at 07:32
266 characters of URL? Man, there's a limit for `href` and `data:` URI. Post a sample URL please? – Praveen Kumar Purushothaman Nov 30 '15 at 07:33
@josh http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers – Praveen Kumar Purushothaman Nov 30 '15 at 07:33

How to add a hyperlink column to a table using jquery?

1 Answers1