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

?

轉載于:https://www.cnblogs.com/610553824lyx/p/6861843.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。