function createTable(parentNode,headres,datas){//創(chuàng)建表格var table = document.createElement("table");//將表格追加到父容器中 parentNode.appendChild(table);//設(shè)置table的樣式table.cellSpacing = 0;table.cellPadding = 0;table.border = "1px";//創(chuàng)建表頭var thead = document.createElement("thead");//將標(biāo)題追加到table中 table.appendChild(thead);//創(chuàng)建trvar tr =document.createElement("tr");//將tr追加到thead中 thead.appendChild(tr);//設(shè)置tr的樣式屬性tr.style.height="50px";tr.style.backgroundColor = "lightgray";//遍歷headers中的數(shù)據(jù)for(var i =0;i<headres.length;i++){//創(chuàng)建thvar th = document.createElement("th");//將th追加到thead中的tr中 tr.appendChild(th);//將headers的數(shù)據(jù)找到對應(yīng)的th放進去 此處 用到了setInnerText()函數(shù) 調(diào)用common.js setInnerText(th,headres[i]);}//創(chuàng)建tbodt createTbody(parentNode,table,datas);};function createTbody(parentNodes,table,datas){//創(chuàng)建tbodyvar tbody = document.createElement("tbody");//將tbody追加到table中 table.appendChild(tbody);//設(shè)置tbody的樣式屬性tbody.style.textAlign = "center";//遍歷得到數(shù)據(jù)源for(var i=0;i<datas.length;i++){//獲取沒想數(shù)據(jù)var data =datas[i];//創(chuàng)建trtr = document.createElement("tr");//將tr追加到tbody中 tbody.appendChild(tr);//設(shè)置tbody中tr的屬性tr.style.height="40px";//遍歷對象的屬性for(var key in data){//創(chuàng)建tdvar td = document.createElement("td");//追加到tbody中的tr中 tr.appendChild(td);//將得到的沒項屬性添加到每一個td中 setInnerText(td,data[key]);}//創(chuàng)建操作列td = document.createElement("td");//追加到tr中 tr.appendChild(td);//給td設(shè)置a標(biāo)簽td.innerHTML = "<a href='javaScript:;'>刪除</a>"//注冊點擊事件//找到a標(biāo)簽var link = td.children[0];//設(shè)置a便簽的屬性index為1link.index = i;//注冊事件link.onclick = function () {//得到當(dāng)前a標(biāo)簽的索引值var index = this.index;//刪除該索引值的項datas.splice(index,1);//刪除table parentNodes.removeChild(table);//重新創(chuàng)建table createTable(parentNodes,headers,datas);};//判斷tr隔行變色//鼠標(biāo)移動上去高亮顯示if(i%2==0){//奇數(shù)行tr.style.backgroundColor = "pink";}else{//偶數(shù)行tr.style.backgroundColor = "#B9FFCF";}//注冊事件高亮顯示 var bg;//鼠標(biāo)經(jīng)過tr.onmouseover = function () {bg = this.style.backgroundColor;this.style.backgroundColor = "#4BE1FF";};//鼠標(biāo)離開tr.onmouseout = function(){this.style.backgroundColor = bg;};}};

?

轉(zhuǎn)載于:https://www.cnblogs.com/610553824lyx/p/6861843.html

總結(jié)

以上是生活随笔為你收集整理的javascript动态创建table的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。