使用 jquery 将“a href”行添加到带有超链接的键值表答案

【问题标题】：Add 'a href' row to key value table with hyperlink using jquery使用 jquery 将“a href”行添加到带有超链接的键值表
【发布时间】：2017-03-09 10:24:00
【问题描述】：

下表为列名和相关属性创建了一个键值（全文本）表。我如何创建一个特殊情况来确保来自列“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”字段上创建超链接？

【问题讨论】：

标签： jquery html hyperlink html-table

【解决方案1】：

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

【讨论】：

您的回答直接回答了我的问题。只需稍加调整，我就能让它按需要工作。 sp。 - if ((keys[k]) == 'url') {...感谢您的快速回复！
不客气。我很高兴能帮助你！是的，很抱歉 text()，这是一个错误。我现在编辑了它。

【解决方案2】：

如果检测到任何值，以下代码将自动将任何值呈现为 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);
  }
}

【讨论】：