牛骨文教育服务平台(让学习变的简单)
博文笔记

jQuery 动态生成多个表格

创建时间:2017-04-21 投稿人: 浏览次数:1223

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()

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。