我想在div元素中创建表
在我的.html文件中,我有这个
<div id='div1'> </div>
在我的js文件中,我想放置包含行和数据的新表
我该如何实现?
答案 0 :(得分:30)
假设您拥有该表的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>';
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');
答案 1 :(得分:3)
你可以采用许多不同的方法。一种方法是做这样的事情:
// $(document).ready() makes sure that nothing happens until the page
// is fully loaded. It's important because the div may not have loaded
// yet if you put code outside of this
$(document).ready( function() {
$("#div1").append(
"<table><tr><td>My column 1, row 1</td>" +
"<td>My column 2, row 2</td></tr>" +
"<tr><td>My column 1, row 2</td>" +
"<td>My column 2, row 2</td></tr></table>");
});
这将把整个表放入你的div,解析为HTML。另一种方法是,如果你想分别添加每一行,那就是:
$(document).ready(function() {
$("#div1").append("<table id=\"my_table1\"></table>");
$("#my_table1").append("<tr><td>Row 1</td></tr>");
... insert more rows here ...
$("#my_table1").append("<tr><td>Row ...</td></tr>");
});
重要的是要了解.append()
会使用美元符号选择器($("selector text")
)
答案 2 :(得分:0)
具有以下结构的HTML:
<html>
<head>
<body>
<div id="container">
<div id="row0" class="row">
<div id="col0" class="column">
<div id="col1" class="column">
<div id="col2" class="column">
</div>
<div id="row1" class="row">
<div id="col0" class="column"></div>
<div id="col1" class="column"></div>
<div id="col2" class="column"></div>
</div>
<div id="row2" class="row">
<div id="col0" class="column"></div>
<div id="col1" class="column"></div>
<div id="col2" class="column"></div>
</div>
</div>
</body>
</html>
这是jquery代码
$(document).ready(function(){
var row,col,rowid,colid;
for(i=0;i<=2;i++){
row='<div id=\"row'+i+'\" class=\"row\"></div>';
$("#container").append(row);
for(j=0;j<=2;j++){
col='<div id=\"col'+j+'\" class=\"column\"></div>';
$("#row"+i).append(col);
$("#col"+j).append(flipper);
}
}
});
答案 3 :(得分:0)
例如,您已从服务器中获取JASON数据。
txt_Name = .Range("E" & m).Value
这里是gg_stringformat的代码
var obj = JSON.parse(msg);
var tableString ="<table id='tbla'>";
tableString +="<tr><th>Name<th>City<th>Birthday</tr>";
for (var i=0; i<obj.length; i++){
tableString +=gg_stringformat("<tr><td>{0}<td>{1}<td>{2}</tr>",obj[i].name, obj[i].city, obj[i].birthday);
}
tableString +="</table>";
$('#divb').html(tableString);
答案 4 :(得分:-1)
var newContent = $('<your html="here"/>');
var insertLocation = $('#div1');
insertLocation.append(newContent);