當前位置：首頁 >

表格生成器

發布時間：2025/3/12 17 豆豆

生活随笔收集整理的這篇文章主要介紹了表格生成器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

能自動生成表格的小程序

當你在相應的輸入框內輸入表格的行高，列寬，多少行，多少列的數字后，點擊創建表格就會自動生成你想要的表格。
未輸入數據之前：

輸入要生成表格數據之后點擊創建表格：（為了更好的區分行我設置了黑色背景填充）

==程序解讀：==在頁面寫上四個分別為行數，列數，行高，列寬的輸入框和一個創建表格的按鈕，在JavaScript里面創建對象接受輸入的數據，使用for循環生成想要的表格，在for循環里使用if判斷行數的奇偶并設置不同的背景色，一個想要的表格就做好了。

下面看代碼

頁面內容

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body>行數:<input type="text" id="row" />列數:<input type="text" id="col" />行高:<input type="text" id="height" />列寬:<input type="text" id="width" /><input type="button" value="創建表格" onclick="show()" /><div id="input"></div></body><script src="js/table.js"></script> </html>

JavaScript代碼

//創建對象function table(row, col, height, width){this.row=row;this.col=col;this.height=height;this.width=width;}function show(){//邊框厚度table.prototype.border=1;table.prototype.createtable=function(){var screen="";screen ="<table align='left' border='"+this.border+"'>"var bgcolor;//循環輸出行for(i=0;i<this.row;i++){//分辨顏色if(i%2 != 0){bgcolor="#ffffff";}else{bgcolor="#000000";}screen += "<tr bgcolor='"+bgcolor+"'>"; //循環輸出列for(j=0;j<this.col;j++){screen +="<td height='"+this.height+"' width='"+this.width+"'></td>"}screen+="<tr>";}screen+="<table>";return screen;}//創建對象var table1 = new table(document.getElementById("row").value,document.getElementById("col").value,document.getElementById("height").value,document.getElementById("width").value);//調用方法document.getElementById("input").innerHTML = table1.createtable();}

一個簡單有趣的表格就自己生成了！！！

總結

以上是生活随笔為你收集整理的表格生成器的全部內容，希望文章能夠幫你解決所遇到的問題。

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