时间戳

首页 > 解决方案 > 用js填充表格时，标签a没有给出想要的结果

javascript - 用js填充表格时，标签a没有给出想要的结果

问题描述

嘿，我尝试从 js 文件中填充我的标签。我希望 tr 标签被 a 标签包围。但我遇到了 2 个代码的 2 个问题。首先，当我使用该代码时

for (var i = 0; i < data.length; i++) {
  $("#liste").find('tbody')
  .append($('<a>')
  .attr('href',data[i][0])
.append($('<tr>')
    .append($('<td>')      
        .text(data[i][1]) )
        .append($('<td>')
            .text(data[i][3])
            )
    )
);
}

尽管表格代码中的一切似乎都是我想要的方式，但看起来好像没有样式代码。

第二个问题是当我使用该代码时

for (var i = 0; i < data.length; i++) {
  $('#liste').append('<a href="'+data[i][0]+'"><tr><td>'+data[i][1]+'</td><td>'+data[i][3]+'</td></tr></a>');}

图像和内容的一切都很美。但我的 a 标签甚至从未添加过。

标签： javascripthtmlcss

解决方案

您可以尝试使用 JavaScriptonclick作为tr标记：

// Mock data
const data = [
  ['https://bbc.com', '1a', '1b', '1c'],
  ['https://bing.com', '2a', '2b', '2c']
];

// Allows redirect to specific URL
function openLink(url) {
  window.location = url;
}

// Pay attention, that the link tag was removed from
// original code, onclick for tr tag was added instead
for (var i = 0; i < data.length; i++) {
  $('#liste').append('<tr onclick="openLink(\''+data[i][0]+'\')"><td>'+data[i][1]+'</td><td>'+data[i][3]+'</td></tr>');
}
/* Style tr with onclick attribute as link */
tr[onclick] {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="liste"></table>

推荐阅读