用js怎么建表格

1．在頁面div中創(chuàng)建一個空白表，可以根據(jù)需要對其進行定制。

創(chuàng)新互聯(lián)專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，中國電信云錦天府，中國電信云錦天府，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

2．創(chuàng)建表之后，我們可以編寫關(guān)鍵代碼來動態(tài)生成表。我們編寫了一個js方法來觸發(fā)使用。

3.在 TB 標簽中，我們添加了標簽，主要用于提供用戶輸入?yún)?shù)，而全局變量num主要用于區(qū)分每個添加參數(shù)的唯一id。

4．獲取表中的數(shù)據(jù)，以供下圖參考。

5．一旦我們獲得了表中的數(shù)據(jù)，我們就應(yīng)該將其轉(zhuǎn)換成json數(shù)據(jù)的形式。

怎么用javascript創(chuàng)建表格

方法一：最原始的方法，創(chuàng)建一一元素

var?a1=document.createElement("table");

var?a2=document.createElement("tbody");

var?a3=document.createElement("tr");

var?a4=document.createElement("td");

//開始appendchild()追加各個元素

a3.appendChild(a4);

a2.appendChild(a3);

a1.appendChild(a2);

方法二：利用table對象里面含有的函數(shù)：插入行和插入列

var?tabNode=document.createElement("table");

var?trNode=tabNode.insertRow();

var?tdNode=trNode.insertCell;

tabNode.innerHTML="這是采用table對象里面的函數(shù)創(chuàng)建的"

注意：利用原始方法，一個個createElement時候，必須要添加一個tbody對象

動態(tài)的創(chuàng)建和刪除：

創(chuàng)建表格，通過輸入的值：

function?createTable()?{

tableNode?=?document.createElement("table");?//獲得對象???

tableNode.setAttribute("id",?"table")

var?row?=?parseInt(document.getElementsByName("row1")[0].value);?//獲得行號?

//alert(row);???

if?(row?=?0?||?isNaN(row))?{

alert("輸入的行號錯誤，不能創(chuàng)建表格，請重新輸入：");

return;

}

var?cols?=?parseInt(document.getElementsByName("cols1")[0].value);

if?(isNaN(cols)?||?cols?=?0)?{

alert("輸入的列號錯誤，不能創(chuàng)建表格，請重新輸入：");

return;

}

//上面確定了?現(xiàn)在開始創(chuàng)建??

for?(var?x?=?0;?x??row;?x++)?{

var?trNode?=?tableNode.insertRow();

for?(var?y?=?0;?y??cols;?y++)?{

var?tdNode?=?trNode.insertCell();

tdNode.innerHTML?=?"單元格"?+?(x?+?1)?+?"-"?+?(y?+?1);

}

}

document.getElementById("div1").appendChild(tableNode);?//添加到那個位置?

}

刪除行：

function?delRow()?{

//要刪除行，必須得到table對象才能刪除，所以在創(chuàng)建的時候必須要設(shè)置table對象的?id?方便操作?

var?tab?=?document.getElementById("table");?//獲得table對象??

if?(tab?==?null)?{

alert("刪除的表不存在！")

return;

}

var?rows?=?parseInt(document.getElementsByName("delrow1")[0].value);?//獲得要刪除的對象??

if?(isNaN(rows))?{

alert("輸入的行不正確。請輸入要刪除的行。。。");

return;

}

if?(rows?=?1??rows?=?tab.rows.length)?{

tab.deleteRow(rows?-?1);

}?else?{

alert("刪除的行不存在??！");

return;

}?

}

刪除列：

//刪除列要麻煩些，?要通過行來進行刪除???

//?一行的cells的長度就是列的個數(shù)???

//tab.rows[x].deleteCell(cols-1)

function?delCols()?{

//獲得table對象??

var?tab?=?document.getElementById("table");

if?(tab?==?null)?{

alert("刪除的表不存在！！");

return;

}

//獲得文本框里面的內(nèi)容????

var?cols?=?parseInt(document.getElementsByName("delcols1")[0].value);

//檢查是否可靠???

if?(isNaN(cols))?{

alert("輸入不正確。請輸入要輸出的列。。");

return;

}

if?(!(cols?=?1??cols??tab.rows[0].cells.length))?{

alert("您要刪除的行不存在??！");

return;

}

for?(var?x?=?0;?x??tab.rows.length;?x++)?{//所有的行??

tab.rows[x].deleteCell(cols?-?1);

}?

}

javascript怎么修改表格的內(nèi)容

用javascript動態(tài)修改表格內(nèi)容,先來看JS部分代碼：

script

var arr=new Array()

arr[0]="這是改變后的內(nèi)容一";

arr[1]="這是改變后的內(nèi)容二";

arr[2]="這是改變后的內(nèi)容三";

/script

把切換后的內(nèi)容寫在了JavaScript的數(shù)組里，這樣方便。

使用上面的JavaScript：

select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]"

option value=a改變第一格/option

option value=a改變第二格/option

option value=a改變第三格/option

/select

table id=zz border=1

tr height=20

td width=220第一格/td

td width=220第二格/td

td width=220第三格/td

/tr

/table

把以上代碼放入網(wǎng)頁的body/body區(qū)間內(nèi)即可。

javascript設(shè)置表格的寬度和高度

window.outerheight

窗口總高度

和window.screen.availheight一樣

window.innerheight

窗口可視區(qū)域高度

window.screen.height

顯示器屏幕高度

另外：jquery獲取高度

$(".thiscrumbs").height()

元素本身高度

$(".thiscrumbs").innerheight()

元素高度+內(nèi)邊距

$(".thiscrumbs").outerheight()

元素高度+內(nèi)邊距+邊框

$(".thiscrumbs").outerheight(true)

元素高度+內(nèi)邊距+邊框+外邊距

用js怎么建表格？

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

script type="text/javascript"

function createTable(width,rows,cells)

{

//創(chuàng)建一個表格對象

var mytable=document.createElement("table");

mytable.cellSpacing="1px";

//創(chuàng)建一個表頭對象

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);

}

//創(chuàng)建一個表體對象

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);

}

//創(chuàng)建一個表腳對象

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