Noah Huntington Noah Huntington - 1 month ago 6
HTML Question

Add 'a href' row to key value table with hyperlink using jquery

The table below creates a key value (all text) table for column name and associated property. How can I create a special case to ensure a hyperlink for the value from column 'url' instead of text like the rest.

With the following..

var table = $("<table><tr><th>Column</th><th>Value</th></tr></table>");
var keys = Object.keys(properties);
var banProperties = ['geom'];
**var url = ['url'];**
for (var k = 0; k < keys.length; k++) {
if (banProperties.indexOf(keys[k]) === -1) {
var row = $("<tr></tr>");
row.append($("<td></td>").text(keys[k]));
row.append($("<td></td>").text(properties[keys[k]]));

//Add conditional statment here to ensure href instead of text
// on column 'url'

table.append(row);
}
}


I get this...
enter image description here

I have tried something like this...

var table = $("<table><tr><th>Column</th><th>Value</th></tr></table>");
var keys = Object.keys(properties);
var banProperties = ['geom'];
var url = ['url'];
for (var k = 0; k < keys.length; k++) {
if (banProperties.indexOf(keys[k]) === -1) {
var row = $("<tr></tr>");
row.append($("<td></td>").text(keys[k]));
//row.append($("<td></td>").text(properties[keys[k]]));
row.append($("<td></td>").html('<a href="#">Foo</a>'));
table.append(row);
}
}


Which produces the following result...

enter image description here

How do I combine these methods to only create hyperlink on 'url' field?

Answer

Check if current column is the url:

var row = $("<tr></tr>");
row.append($("<td></td>").text(keys[k]));
if (keys[k]=='url'){    
    row.append($("<td></td>").html('<a href="'+properties[keys[k]]+'">'+properties[keys[k]]+'</a>'));
}
else{
    row.append($("<td></td>").text(properties[keys[k]]));
}
table.append(row);