js通過後臺配置動態生成html table表格
阿新 • • 發佈：2019-01-27
首先說明下需求，不同的需求可能實現不一樣。
我的需求是同學問我如何通過後臺動態的配置，然後動態的生成前臺的html table。
因為他們的前臺頁面是寫死的，表格的每一行每一列，除了資料。
我們先來看看資料情況。
他希望一級二級指標和三級指標內容發生變化時，也就是動態的新增一級，二級，三級指標時，如何實現一級二級的合併效果。
這個問題一開始我上網搜尋excel模板轉換html。。但是轉換都是固定的內容，也就是模板固定了。動態填充資料是不可能的。
要填充也是單元格填充，不能內容完全動態。
基於這個需求，我自己寫了一個html的例子。也不是完全的動態，手動的指定 了第一列和第二列為標題列。
原理是：將每一列及其對應的合併行數讀出來，然後，判斷第一列和第二列的名稱，如果第一次處理，就新增td 且rowspan。
否則，就只新增第三列的td。
廢話不多說，，上程式碼。。（模擬資料見程式碼）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> *{ padding:0px; margin:0px; } table{ width:100%; height:100%; } table td{ text-align:center; border:solid 1px; } </style> </head> <body> <table> <thead> <tr><td>列1</td><td>列2</td><td>列3</td></tr> </thead> <tbody id="tb"> </tbody> </table> <script> var json=[ {"t1":{"t":"a1","rows":5},"t2":{"t":"b1","rows":3},"t3":{"t":"c1","rows":1}}, {"t1":{"t":"a1","rows":5},"t2":{"t":"b1","rows":3},"t3":{"t":"c2","rows":1}}, {"t1":{"t":"a1","rows":5},"t2":{"t":"b1","rows":3},"t3":{"t":"c3","rows":1}}, {"t1":{"t":"a1","rows":5},"t2":{"t":"b2","rows":2},"t3":{"t":"c4","rows":1}}, {"t1":{"t":"a1","rows":5},"t2":{"t":"b2","rows":2},"t3":{"t":"c5","rows":1}} ]; //json = JSON.parse(json); draw(json); function draw(json){ var t1='',t2=''; $.each(json,function(i,item){ var html = '<tr>'; if(t1=='' || t1!=item.t1.t){ html += '<td rowspan="'+item.t1.rows+'">'+item.t1.t+'</td>'; t1 = item.t1.t; } if(t2=='' || t2!=item.t2.t){ html += '<td rowspan="'+item.t2.rows+'">'+item.t2.t+'</td>'; t2 = item.t2.t; } html += '<td>'+item.t3.t+'</td>'; html +='</tr>'; $('#tb').append(html); }); } </script> </body> </html>