时间戳

首页 > 解决方案 > 如何在 td 中附加值

javascript - 如何在 td 中附加值

问题描述

我正在使用数据表在表中获取动态值。我在警报中得到了我想要的值，但我想在表格中显示该值。为此，我使用了 .append、.html 但没有运气。我怎样才能显示 = 我在<td>. 我也尝试给 td 一个 id 例如<td id="files"> 这里是我的代码：

function format(d) {
  var str = d.files;
  var myarr = str.split(",");
  for (var i = 0; i < myarr.length; i++) {
    alert(myarr[i]);
    $("#files").append("<a href='/uploads/" + myarr[i] + "'>" + myarr[i] + "</a>");
  }
  
  // `d` is the original data object for the row
  return '<table id="ChildRows" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
    '<td>Contact Person:</td>' +
    '<td>' + d.person + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Phone:</td>' +
    '<td>' + d.phone + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Web:</td>' +
    '<td>' + d.web + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Trade Type:</td>' +
    '<td>' + d.ttype + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Files:</td>' + '<td id="files">'
  '</td>' +
  '</tr>' +
  '</table>';
}

我希望这将是一个简单的修复。任何帮助都将是非常可观的

标签： javascriptjquery

解决方案

您的问题是该#files元素在您尝试选择它时不存在。您需要先将该 HTML 字符串添加到 DOM，然后附加到它。

或者，您可以修改创建该 HTML 字符串以包含for循环输出的逻辑，如下所示：

function format(d) {
  var str = d.files;
  var filesHtml = str.split(",").map(function(file) {
    return '<a href="/uploads/' + file + '">' + file + '</a>';
  });
  
  return '<table id="ChildRows" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
      '<td>Contact Person:</td>' +
      '<td>' + d.person + '</td>' +
    '</tr><tr>' +
      '<td>Phone:</td>' +
      '<td>' + d.phone + '</td>' +
    '</tr><tr>' +
      '<td>Web:</td>' +
      '<td>' + d.web + '</td>' +
    '</tr><tr>' +
      '<td>Trade Type:</td>' +
      '<td>' + d.ttype + '</td>' +
    '</tr><tr>' +
      '<td>Files:</td>' + 
      '<td id="files">' + filesHtml + '</td>' +
    '</tr>' +
  '</table>';
}

var html = format({ 
  person: 'John Smith',
  phone: '1234 567890',
  web: 'http://google.com',
  ttype: 'Foobar',
  files: 'a.jpg,b.jpg' 
});
$('div').append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

推荐阅读