Html 使用 jQuery 创建表追加

发布于01月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/

推荐答案

这一行:

$('#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);

希望这能有所帮助.

Html 使用 jQuery 创建表追加

推荐答案

Html相关问答推荐

springBoot + Thymeleaf：属性中的UTF-8

在浮动元素旁边垂直居中

为什么在CSS中字段是一个有效的 colored颜色名称？

防止SVG边框半径zoom

如何防止第二列中的内容影响第一列中内容的位置？

悬停效果在新西兰表上不起作用

在Hero部分中同时zoom 背景图像和形状的问题

如何创建嵌套的动态表单元素

文本幻灯片显示动画

在移动屏幕上显示时分支树视图的响应能力问题

Div 容器不会遵守边距、填充或间隙

在HTML请求中添加源URL

Bootstrap 轮播内容在箭头之间不显示

我正在使用 NVDA 并多次读取关闭按钮，但它的读取非常完美

如何动态调整彼此重叠的两个 div 的大小，使它们在增长时保持相同的高度

使用模板循环每行列出 3 个 bootstrap 卡

HTML 标记未在页面上展开

SVG 适用于 Safari，不适用于 Chrome

所有幻灯片上的 Quarto RevealJS 标题

不会与
对齐