如何使用jQuery创建包含行的新表并将其包装在div中 [英] How to create a new table with rows using jquery and wrap it inside div

问题描述

我想在div元素中创建表格

在我的.html文件中，我有这个

 < div id ='div1'> < / DIV> 
  

在我的js文件中，我想用行和数据放置新表

如何实现这一点？解析方案

假设你有表格的HTML，你可以简单地创建一个jQuery对象并将其附加到DIV中。如果你有这些数据，你需要遍历它，并从数据中创建单元格/行并单独添加它们。

  $（'< table>< tr>< td> .....< / td>< / tr>< / table>'。appendTo（'＃div1'）; 
  

或

  var data = [[1,2,3]，[4,5,6]，[7,8,9]]; 
 
 var html ='< table>< thead>< tr> ...< / tr>< / thead>< tbody>'; 
 for（var i = 0，len = data.length; i< len; ++ i）{
 html + ='< tr>'; （var j = 0，rowLen = data [i] .length; j  html + ='< td>'+ data [i] [j ] +'< / td>'; 
} 
 html + =< / tr>; 
} 
 html + ='< / tbody>< tfoot>< tr> ....< / tr>< / tfoot>< / table>'; 
 
 $（html）.appendTo（'＃div1'）; 
  

I would like to create table inside a div element

On my .html file, I have this

<div id='div1'> </div>

On my js file, I want to place new table with rows and with data

How can I implement this?

解决方案

Assuming you have the HTML for the table, you can simply create a jQuery object out of it and append it to the DIV. If you have the data, you'll need to iterate through it and create the cells/rows from the data and add them independently.

$('<table><tr><td>.....</td></tr></table>').appendTo( '#div1' );

or

var data = [ [ 1, 2, 3 ], [ 4, 5, 6 ], [7, 8, 9 ] ];

var html = '<table><thead><tr>...</tr></thead><tbody>';
for (var i = 0, len = data.length; i < len; ++i) {
    html += '<tr>';
    for (var j = 0, rowLen = data[i].length; j < rowLen; ++j ) {
        html += '<td>' + data[i][j] + '</td>';
    }
    html += "</tr>";
}
html += '</tbody><tfoot><tr>....</tr></tfoot></table>';

$(html).appendTo('#div1');

这篇关于如何使用jQuery创建包含行的新表并将其包装在div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！