使用 jQuery 创建表 - 追加

IT技术 javascript jquery html
2021-01-19 05:51:06

我在页面 div 上：

<div id="here_table"></div>

在 jquery 中：

for(i=0;i<3;i++){
    $('#here_table').append( 'result' +  i );
}

这为我生成：

<div id="here_table">
    result1 result2 result3 etc
</div>

我想在表中收到这个：

<div id="here_table">
    <table>
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
    </table>
</div>

我在做：

$('#here_table').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

 $('#here_table').append(  '</table>' );

但这为我生成：

<div id="here_table">
    <table> </table> !!!!!!!!!!
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
</div>

为什么？我怎样才能正确地做到这一点？

现场直播：http : //jsfiddle.net/n7cyE/

6个回答

这一行：

$('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );

附加到div#here_table不是新的table.

有几种方法：

/* Note that the whole content variable is just a string */
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#here_table').append(content);

但是，使用上述方法添加样式和使用<table>.

但是这个怎么样，它做了你所期望的几乎很棒的事情：

var table = $('<table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

$('#here_table').append(table);

希望这会有所帮助。

对于第二个示例，您需要在 tr 中添加一个 td，然后在 td 上执行 .text。此外，当使用 jquery 创建 html 元素时，您只需要开始标记。$('<table>') 效果很好。
2021-03-28 05:51:06
对于 jquery 示例，您可以使用较小的标记名称，例如$('<table/>')代替$('<table></table>)、$('<tr/>')代替$('<tr></tr>)等。
2021-03-31 05:51:06

你需要在tr里面追加，table所以我在你的循环中更新了你的选择器并删除了关闭，table因为它不是必需的。

$('#here_table').append(  '<table />' );

 for(i=0;i<3;i++){
    $('#here_table table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

主要问题是您将 附加tr到divhere_table。

编辑： 如果性能是一个问题，这里有一个 JavaScript 版本。使用文档片段不会导致循环的每次迭代都发生回流

var doc = document;

var fragment = doc.createDocumentFragment();

for (i = 0; i < 3; i++) {
    var tr = doc.createElement("tr");

    var td = doc.createElement("td");
    td.innerHTML = "content";

    tr.appendChild(td);

    //does not trigger reflow
    fragment.appendChild(tr);
}

var table = doc.createElement("table");

table.appendChild(fragment);

doc.getElementById("here_table").appendChild(table);
@ChazyChaz 公平评论，但这是 9 年前发布的，当时 IE 9 是新的，在 IE 9 下textContent不受支持。这也不是答案的重点。随着技术格局变化如此之快，评论 10 年前的帖子可能会很棘手。
2021-03-20 05:51:06
您应该element.textContent用于纯文本。
2021-03-27 05:51:06
很好的答案！谢谢！我使用您的 JavaScript 版本在 App Inventor puravidaapps.com/table.php 中显示动态表
2021-04-07 05:51:06
不应使用 innerHTML 传递纯文本
2021-04-12 05:51:06
@Craig 是的，你说得对，评论的目的只是为了确保遇到这些旧答案的人知道这一点。我很清楚这一点，因为我曾经很懒惰，跳过了文档，而是依赖于旧的答案。
2021-04-13 05:51:06

当您使用 时append，jQuery 期望它是格式良好的 HTML（纯文本计数）。 append不是喜欢做+=。

您需要先制作表格，然后附加它。

var $table = $('<table/>');
for(var i=0; i<3; i++){
    $table.append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}
$('#here_table').append($table);
+1 这里最好的方法 - 表明 jQuery 实际上适用于 DOM 元素，而不是原始 HTML。
2021-03-23 05:51:06

或者以这种方式使用 ALL jQuery。each 可以遍历任何数据，无论是 DOM 元素还是数组/对象。

var data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
var numCols = 1;           


$.each(data, function(i) {
  if(!(i%numCols)) tRow = $('<tr>');

  tCell = $('<td>').html(data[i]);

  $('table').append(tRow.append(tCell));
});
​

http://jsfiddle.net/n7cyE/93/

你确定 jQuery 已加载？
2021-03-15 05:51:06
我将更改该行以不使用 HTML 而是使用 TEXT（因为在此示例中我们仅将文本插入表格单元格中） tCell = $('<td>').text(data[i]);
2021-03-19 05:51:06
是否需要特定设置才能使其在 jsFiddle 之外工作？在空白的 js 文件中尝试此操作会返回“未捕获的类型错误：无法读取未定义的属性‘每个’”
2021-03-27 05:51:06

要添加多个列和行，我们还可以进行字符串连接。不是最好的方法，但它确实有效。

             var resultstring='<table>';
      for(var j=0;j<arr.length;j++){
              //array arr contains the field names in this case
          resultstring+= '<th>'+ arr[j] + '</th>';
      }
      $(resultset).each(function(i, result) {
          // resultset is in json format
          resultstring+='<tr>';
          for(var j=0;j<arr.length;j++){
              resultstring+='<td>'+ result[arr[j]]+ '</td>';
          }
          resultstring+='</tr>';
      });
      resultstring+='</table>';
          $('#resultdisplay').html(resultstring);

这还允许您动态地向表中添加行和列，而无需对字段名进行硬编码。

其它你可能感兴趣的问题
上一篇Chrome 无法加载网络工作者 下一篇使用谷歌地图 api v3 折线捕捉到道路