使用jquery使用超链接将“a href”行添加到键值表

Question

下表为列名和关联属性创建键值（所有文本）表。如何创建一个特殊情况以确保来自“url”列的值的超链接，而不是像其他文本一样的文本。

以下......

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);
  }
}

我明白了......

我尝试过这样的事情......

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);
  }
}

产生以下结果......

如何将这些方法组合起来只在'url'字段上创建超链接？

Answer 1

以下代码会自动将任何Value呈现为URL，如果它被检测到（目前只有UNC，但您可以扩展RegExp）。

function ValidURL(str) {
  var pattern = new RegExp('^(\\\\[^/\\\]\[":;|<>+=,?* _]+\\[^/\\\]\[":;|<>+=,?*]+)((?:\\[^\\/:*?"<>|]+)*\\?)$','i');
  if(!pattern.test(str)) {
    return false;
  } else {
    return true;
  }
}

var table = $("<table><tr><th>Column</th><th>Value</th></tr></table>");
var keys = Object.keys(properties);
var banProperties = ['geom'];

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]));

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

    table.append(row);
  }
}

Answer 2

检查当前列是否为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);