首頁 > web前端 > js教程 > 主體

javascript如何建立表格(javascript繪製表格的二種方法)_基礎知識

WBOY
發布: 2016-05-16 17:09:55
原創
2144 人瀏覽過

1、inserRow()和insertCell()函數

insertRow()函數可以帶參數,形式如下:

insertRow(index):index從0開始

這個函數將新行加入index的那一行前,例如insertRow(0),是將新行加入第一行之前。預設的insertRow()函數相當於insertRow(-1),將新行加入表的最後。一般我們在使用的時候都是:objTable.insertRow(objTable.rows.length).就是為表格objTable在最後新增一行。

insertCell()和insertRow的用法相同,這裡就不再說了。

2、deleteRow()和deleteCell()方法

deleteRow()函數可以帶參數,形式如下:deleteRow(index):index從0開始

和上面兩個方法差不多的意思,就是刪除指定位置的行和儲存格。要傳入的參數:Index是行在表格中的位置,可以下面的方法取得然後去刪除:

複製程式碼 程式碼如下:

var row=document.getElementById("行的By" );
var index=row.rowIndex;//有這個屬性,嘿嘿
objTable.deleteRow(index);

在使用過程中我碰到的一個問題跟大家說一下,就是刪除表格的行的時候,如果你刪除了某一行,那麼表格行數是馬上就變化的,所以如果你要刪除表格的所有行,下面的程式碼是錯誤的:

複製程式碼 程式碼如下:

function clearRow(){
getElementById("myTable");

   for( var i=1; i   {
   tblObj.deleteRow(i) }


這段程式碼要刪除原來的表格的表體,有兩個問題。首先不能是deleteRow(i),應該是deleteRow(1)。因為在刪除表格行的時候,表格的行數在變化,這就是問題的關鍵,rows.length總是在變小,刪除的行數總是會比預想的要少一半,所以正確的刪除表格的行的程式碼應該是這樣:

複製程式碼 程式碼如下:
function clearRow(){
getElementById("myTable");
   var length= objTable.rows.length ;
   for( var i=1; i   {       }
}




3、動態設定單元格與行的屬性
A、採用setAttribute()方法,格式如下:setAttribute(屬性,屬性值)

說明:這個方法幾乎所有的DOM物件都可以使用,第一個參數是屬性的名稱,比如說:border,第二個就是你要為border設定的值了,例如:1

複製程式碼

程式碼如下:var objMyTable = document.getElementB.""""); objMyTable.setAttribute("border",1);//為表格設定邊框為1

其他的例如你要為一個TD設定高度,同樣先取得這個TD對象,然後使用setAttribute()方法


複製程式碼

程式碼如下:var objCell = document.getElementBy." objCell.setAttribute("height",24);//為儲存格設定高度為24

在使用的時候遇到一個設定樣式的問題,不能用setAttribute("class","inputbox2");而應該使用setAttribute("className","inputbox2"),呵呵,其他我估計也有同樣的問題,有些屬性和我們在DW裡面的不一致,呵呵,大家自己摸索吧。


B、直接賦值

複製程式碼

程式碼如下:var objMyTable = document.getElementB.""""); objMyTable.border=1;//為表格設定邊框為1

這個方法也全部適用,呵呵。

4、建立表格

了解了行

與儲存格的增刪那就可以建立表格了。

第一步:你需要有一個你去動態變化的表格,我這裡講的是已經存在頁面的表格,我們要設定一個id:myTable

複製程式碼 程式碼如下:

var objMyTable = document.getElementB."""");

第二步:建立行與列的物件

複製程式碼 程式碼如下:

var index = objMyTable.rows. 🎜>var nextRow = objMyTable.insertRow(index);//要新增的行,我這裡是從倒數第二行開始新增的
//儲存格箱號

var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " CartonNo";
newCellCartonNo.innerHTML = " CartonNo";
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");

這樣就搞定了,可以簡單的建立一個行和列了。具體的程式碼我貼在下面。只是很簡單的例子,不過方法大概是上面的了,呵呵,慢慢摸索吧~

代碼如下:


-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!