我想創建表的div元素如何創建與使用jQuery行的新表,並把它包裝內的div
裏面在我的.html文件,我有這個
<div id='div1'> </div>
在我js文件,我想用行和數據放置新表格
我該如何實現?
我想創建表的div元素如何創建與使用jQuery行的新表,並把它包裝內的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>';
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');
var newContent = $('<your html="here"/>');
var insertLocation = $('#div1');
insertLocation.append(newContent);
有很多不同的方式,你可以用這個去。一種方法是做這樣的事情:
// $(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()
將讓你選擇使用美元符號選擇輸入內的任何元素的的HTML或文本是非常重要的具有這種結構($("selector text")
)
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);
}
}
});
例如,您已從服務器獲得JASON數據。
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);
這裏是gg_stringformat守則
function gg_stringformat() {
var argcount = arguments.length,
string,
i;
if (!argcount) {
return "";
}
if (argcount === 1) {
return arguments[0];
}
string = arguments[0];
for (i = 1; i < argcount; i++) {
string = string.replace(new RegExp('\\{' + (i - 1) + '}', 'gi'), arguments[i]);
}
return string;
}