如何用js實(shí)現(xiàn)簡(jiǎn)單的打印表格

發(fā)布時(shí)間：2021-12-14 13:54:27 來源：億速云閱讀：827 作者：柒染欄目：開發(fā)技術(shù)

本篇文章為大家展示了如何用js實(shí)現(xiàn)簡(jiǎn)單的打印表格，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

為大家分享了js實(shí)現(xiàn)打印表格的具體代碼，供大家參考，具體內(nèi)容如下

效果如下：

代碼如下：

<!DOCTYPE html>

<head>

</head>

<body>

<script> var data=[

{id:1001,icon:"img/1.png",name:"餐飲0",num:1,price:10},

{id:1002,icon:"img/2.png",name:"餐飲1",num:1,price:20},

{id:1003,icon:"img/3.png",name:"餐飲2",num:1,price:30},

{id:1004,icon:"img/4.png",name:"餐飲3",num:1,price:40},

{id:1005,icon:"img/5.png",name:"餐飲4",num:1,price:50},

{id:1006,icon:"img/6.png",name:"餐飲5",num:1,price:60},

{id:1007,icon:"img/7.png",name:"餐飲6",num:1,price:70},

{id:1008,icon:"img/8.png",name:"餐飲7",num:1,price:80},

{id:1009,icon:"img/9.png",name:"餐飲8",num:1,price:90},

{id:1010,icon:"img/10.png",name:"餐飲9",num:1,price:100} ];

var table="<table border='1' cellspacing='0'>";

//這個(gè)字符串第一位為# 顏色的格式

for(var i=0;i<10;i++) {

table += "<tr>";

for (var key in data[i]){

table = table+"<td>"+data[i][key]+"</td>"; }

table+="</tr>"; } table+="</table>";

var bodys = document.getElementsByTagName('body')[0];

bodys.innerHTML = table;

</script>

</body>

</html>

上述內(nèi)容就是如何用js實(shí)現(xiàn)簡(jiǎn)單的打印表格，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

猜你喜歡