在表格单元格内创建动态href答案

【问题标题】：Create dynamic href inside table cell在表格单元格内创建动态href
【发布时间】：2012-08-09 11:33:08
【问题描述】：

我的问题是这样的：

我正在尝试在表格中创建一些单元格，这些单元格将由我从 XML 文档中提取的数据填充，但我也希望这些单元格成为超链接。我正在这样做：

var table = $('<table></table>').addClass('table');
for(i=0;i<x.length;i++){
    var row = $('<tr></tr>').text(x.item(i).getAttribute("id")).attr('href', 'www.my-url.com/'+x.item(i).getAttribute("id"));
    table.append(row);
}

单元格已正确填充我想要的文本，但单元格不可点击。我在控制台中没有收到任何错误。知道我做错了什么吗？

【问题讨论】：

你能告诉我们x是什么以及一些标记吗？
根据您发布的内容，我建议您不要将a 元素附加到单元格中？但这是一个猜测，几乎没有任何信息。
您不能在 <tr> 标签上设置 href 属性并期望它像链接一样工作。如果您希望它像链接一样工作，则必须在 <tr> 内放置一个 <a href=xxx></a> 标记。
@SiGanteng x=myvar.getElementsByTagName('service');只是一个简单的 xml 操作。这很好用，因为单元格中的文本显示正确。
@jfriend00 我怎样才能添加'a'元素而不弄乱我在这里所做的？每当我尝试以某种方式添加它时，它都会停止显示项目。

标签： jquery dynamic html-table href

【解决方案1】：

您不能在<tr> 标记上设置href 属性并期望它像<a> 标记一样工作。相反，您需要在<tr> 标记内放置一个<a> 标记。你可以这样做：

var table = $('<table class="mytable"></table>');
for (var i = 0; i < x.length; i++) {
    var txt = x.item(i).id;
    var url = 'http://www.my-url.com/' + txt;
    var row = $('<tr></tr>').html('<a href="' + url + '">' + txt + '</a>');
    table.append(row);
}

该方法创建 HTML 并让浏览器解析它。您也可以像这样直接创建元素：

var table = $('<table class="mytable"></table>');
for (var i = 0; i < x.length; i++) {
    var txt = x.item(i).id;
    var url = 'http://www.my-url.com/' + txt;
    var row = $('<tr></tr>')
    var link = document.createElement("a");
    link.href = url;
    link.innerHTML = txt;
    row.append(link);
    table.append(row);
}

【讨论】：

【解决方案2】：

试试：

var row = $('<tr></tr>').html(....

【讨论】：