js表格編程實例（js表格編程實例教程）

本文目錄一覽：

• 1、js編寫一個可以循環的表格
• 2、用js怎麼建表格？
• 3、怎麼用js做一個表格

js編寫一個可以循環的表格

可以的，最簡單的

div id=”t”/div

script

var html =”table”

for(var i=0;i3;i++){

html+=”tr”;

for(var j=0;j5;j++){

html +=”td”;

html += i+”行”+j+”列”;

html+=”/td”;

}

html+=”/tr”

}

html +=”/table”

console.log(html)

document.getElementById(‘t’).innerHTML = html;

用js怎麼建表格？

input type=”button” value=”創建一個新表格” onclick=”createTable(800,8,5)” /

script type=”text/javascript”

function createTable(width,rows,cells)

{

//創建一個表格對象

var mytable=document.createElement(“table”);

mytable.cellSpacing=”1px”;

//創建一個表頭對象

var mythead=document.createElement(“thead”);

for(a=0;a1;a++)

{

var myrow=document.createElement(“tr”);

for(b=0;bcells;b++)

{

var mytd=document.createElement(“td”);

mytd.innerHTML=”表 頭 ” +(b+1);

mytd.style.cssText=”text-align:center;”;

myrow.appendChild(mytd);

}

mythead.appendChild(myrow);

}

//創建一個表體對象

var mytbody=document.createElement(“tbody”);

for(i=0;irows;i++)

{

var myrow=document.createElement(“tr”);

for(j=0;jcells;j++)

{

var mytd=document.createElement(“td”);

mytd.style.backgroundColor=”#fff”;

mytd.innerHTML=”第”+(i+1)+”行第”+(j+1)+”列”;

myrow.appendChild(mytd);

}

mytbody.appendChild(myrow);

}

//創建一個表腳對象

var mytfoot=document.createElement(“tfoot”);

for(c=0;c1;c++)

{

var myrow=document.createElement(“tr”);

for(d=0;d1;d++)

{

var mytd=document.createElement(“td”);

mytd.innerHTML=”腳”+(d+1);

mytd.style.cssText=”text-align:center;”;

mytd.colSpan=”10″;

myrow.appendChild(mytd);

}

mytfoot.appendChild(myrow);

}

//將表頭追加到表格

mytable.appendChild(mythead)

//將表體追加到表格

mytable.appendChild(mytbody);

//將表腳追加到表格

mytable.appendChild(mytfoot);

//追加對象樣式

mythead.style.cssText=”background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:”+width+”px;”;

mytable.style.cssText=”background-color:#999; border:0px; width:”+width+”px;”;

mytfoot.style.cssText=”background-color:#003; color:#FFF; font-size:14px; font-weight:600; width:”+width+”px;”;

document.body.appendChild(mytable);

}

/script

怎麼用js做一個表格

1．在頁面div中創建一個空白表，可以根據需要對其進行定製。

2．創建表之後，我們可以編寫關鍵代碼來動態生成表。我們編寫了一個js方法來觸發使用。

3.在 TB 標籤中，我們添加了標籤，主要用於提供用戶輸入參數，而全局變數num主要用於區分每個添加參數的唯一id。

4．獲取表中的數據，以供下圖參考。

5．一旦我們獲得了表中的數據，我們就應該將其轉換成json數據的形式。