您的位置:首页 > Web前端 > JavaScript

通过js为html动态创建表格

2017-09-07 08:37 507 查看
$(function () {
$.ajax({
type: "POST",
    url: "../sys/sysMessage/messageList",
    data: "",
    success: function(r){
    initList(r);
    }
});

});

function initList(r){
debugger;
msgJson=r.msgList;
//eval('(' + str + ')')
msgJson = eval('(' + msgJson + ')');
var tabNode = document.getElementById('table1'); //取得自定义的表对象
var thNode = tabNode.createTHead();
var trNode=thNode.insertRow();
 
var obj1 = document.createElement("TH");
var obj2 = document.createElement("TH");
var obj3 = document.createElement("TH");
obj1.style.cssText="text-align: center;";
obj2.style.cssText="text-align: center;";
obj3.style.cssText="text-align: center;";

obj1.innerHTML=" <div class='th-inner sortable both'>"+sysMessageField.model+"</div>";
obj2.innerHTML=" <div class='th-inner sortable both'>"+sysMessageField.waitSubmit+"</div>";
obj3.innerHTML=" <div class='th-inner sortable both'>"+sysMessageField.waitPass+"</div>";

trNode.appendChild(obj1);
trNode.appendChild(obj2);
trNode.appendChild(obj3);
var tbNode = document.createElement("tbody");
tabNode.appendChild(tbNode);
for (var i = 0; i < msgJson.length; i++) {
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
td1.style.cssText="white-space: nowrap; text-align: center; ";
td2.style.cssText="white-space: nowrap; text-align: center; ";
td3.style.cssText="white-space: nowrap; text-align: center; ";

var mk = msgJson[i].moduleName;
var waitSubmit = msgJson[i].waitSubmit;
var waitPass = msgJson[i].waitPass;
var hrefSubmit="";
var hrefPass = "";

var trNode1=tabNode.insertRow();
if(msgJson[i].moduleId==1){
mk=sysMessageField.advmaterial;
hrefSubmit = "../adv/advmaterial.html?status=0";
hrefPass = "../adv/advmaterial.html?status=1";
}else if(msgJson[i].moduleId==2){
mk=sysMessageField.advposition;
hrefSubmit = "../adv/advposition.html?status=0";
hrefPass = "../adv/advposition.html?status=1";
}else if(msgJson[i].moduleId==3){
mk=sysMessageField.advdispatchstrategy;
hrefSubmit = "../adv/advdispatchstrategy.html?auditStatus=0";
hrefPass = "../adv/advdispatchstrategy.html?auditStatus=1";
}else if(msgJson[i].moduleId==4){
mk=sysMessageField.advcreative;
hrefSubmit = "../adv/advcreative.html?status=0";
hrefPass = "../adv/advcreative.html?status=1";
}else if(msgJson[i].moduleId==5){
mk=sysMessageField.advschedule;
hrefSubmit = "../adv/advschedule.html?status=0";
hrefPass = "../adv/advschedule.html?status=1";
}
//td1.innerHTML = "<a href=\"javascript:Tab.addTab(\'测试的\', \'../bus/busprogram.html\')\">"+mk+"</a>"; 
td1.innerHTML = "<span style='white-space:nowrap'>"+mk+"</span>"; 
td2.innerHTML = "<span style='white-space:nowrap'><a href='"+hrefSubmit+"'>"+waitSubmit+"</a></span>";
td3.innerHTML = "<span style='white-space:nowrap'><a href='"+hrefPass+"'>"+waitPass+"</a></span>";
trNode1.appendChild(td1);
trNode1.appendChild(td2);
trNode1.appendChild(td3);

tbNode.appendChild(trNode1);

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html js table