1. 程式人生 > >jQuery 動態生成多個表格

jQuery 動態生成多個表格

html程式碼

<div id="di"  style="display:none;height: 400px;overflow-y: scroll;padding-top: 0px;">

</div>
var errList = data.errList //後臺返回的資料,2維陣列
//獲取放表格的div
var div = $("#di");
//每次迴圈生成一個表格
for (var errnum = 0, errlen = errList.length; errnum < errlen; errnum++) {
     /*1.定義一個表格*/
     var title = "<table id='messageTab"
+ errnum + "' class='display:none; ' >" + "<tbody id='errList" + errnum + "' class='display:none; ' ></tbody></table>"; /*2.把表格增加到div中*/ div.append(title); /*3.對錶格進行操作*/ $("#errList" + errnum).html('');//清空表格中的行和列 var tbodyObj = $("#errList" + errnum); //獲取表格,給表格新增行和列
var errmsg = errList[errnum]; //獲取內陣列 if (errmsg && errmsg.length > 0) { for (var i = 0, len = errmsg.length; i < len; i++) { if (i == 0) { tbodyObj.append("<tr><td width='3%'>" + "</td><td width='97%'>" + errmsg[i] + "</td></tr>"
); } else { tbodyObj.append("<tr><td width='3%'>" + (i) + "</td><td width='97%'>" + errmsg[i] + "</td></tr>"); } } } $("#messageTab" + errnum).css("display", "block"); $("#errList" + errnum).css("display", "block"); }

記錄這個的重點是,必須先2再3,先把表格新增到div中,才 能對錶格進行$("#errList" + errnum).html('');等之後的操作,否則,這個title就是個字串,不是一個html元素
jQuery可以對html元素操作,不能對字串操作append()