js中cell（js中cellspacing）

• 1、javascript中cell的用法
• 2、js如何獲取表格中某一行的單元格數
• 3、誰能解釋下這段js代碼的意思
• 4、js insertcell 怎麼跨列
• 5、js中cell可以顯示單元格的內容，如果單元格是這樣的,如何獲得input里的值呢
• 6、幫忙解釋一下這段javascript是什麼意思？

返回大於等於其數字參數的最小整數。

Math.ceil(number)

必選項number 參數是數值表達式。

說明

返回值為大於等於其數字參數的最小整數。

javascript提供了獲取表格中某一行單元格數的代碼，參考如下：

document.getElementById(‘first’).cells.length  // 獲取id為first的行的單元格數目

實例演示如下：

創建Html元素

div class=”box”

span實例演示：獲取表格第一行的單元格數量/spanbr

div class=”content”

    table

        tr id=”first”td1/tdtd2/tdtd3/td/tr

        trtd4/tdtd5/tdtd6/td/tr

        trtd7/tdtd8/tdtd9/td/tr

    /table

    input type=”button” value=”獲取表格第一行的單元格數量” onclick=”fun_get()”

/div

/div

簡單設置一下css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

table{border-collapse:collapse;}

td{width:80px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

編寫jquery代碼

script

function fun_get(){

alert(document.getElementById(‘first’).cells.length);

}

/script

觀察效果

secTable.cells.length 是table中cell（單元格）的個數

secTable.cells[n].className=”sec2″是給第n個cell的class屬性賦給=”sec2″;

class屬性應該是給css用的

代碼如下:

!DOCTYPE html

html xmlns=””

head

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /

titlejs動態添加表格數據_2 使用insertRow和insertCell方法實現/title

script type=”text/javascript”

var mailArr = [

{ “title”: “一個c#問題”, “name”: “張三”, “date”: “2014-03-21” },

{ “title”: “一個javascript問題”, “name”: “李四”, “date”: “2014-03-21” },

{ “title”: “一個c問題”, “name”: “五五”, “date”: “2014-03-21” },

{ “title”: “一個c++問題”, “name”: “趙六”, “date”: “2014-03-21” }

];

var tab = null;

window.onload = function () {

loadTab();

//全選

document.getElementById(“selA”).onclick = function() {

if (document.getElementById(“selA”).checked == true) {

seleAll(tab, true);

} else {

seleAll(tab, false);

}

};

//刪除所有的選中的

document.getElementById(“delSel”).onclick = function() {

//遍歷所有的input控件即可(除了最後一個全選用的checkbox)

var chks = document.getElementsByTagName(‘input’);

for (var i = chks.length – 2; i =0; i–) {

var chk = chks[i];

if (chk.checked==true) {

//選中行刪除處理

var rowNow = chk.parentNode.parentNode;

rowNow.parentNode.removeChild(rowNow);

} else {

alert(“really”);

}

}

};

};

function loadTab() {

tab = document.getElementById(“tb”);

//把mailArr循環遍歷方式以tr的方式加入表格中

for (var rowindex = 0; rowindex mailArr.length; rowindex++) {

//var tr = tab.insertRow(-1);//-1指最後一行

var tr = tab.insertRow(tab.rows.length – 1);//插入到末二行，最後一行要給全選那一行保留着

var td1 = tr.insertCell(-1);

td1.innerHTML = “input type=’checkbox’/”;

var td2 = tr.insertCell(-1);

td2.innerHTML = mailArr[rowindex].title;

var td3 = tr.insertCell(-1);

td3.innerHTML = mailArr[rowindex].name;

var td4 = tr.insertCell(-1);

td4.innerHTML = mailArr[rowindex].date;

}

}

//要使全選按鈕生效，就要遍歷所有的表格的行

function seleAll(mailTab, isSel) {

for (var i = 0; i mailTab.rows.length; i++) {

var tr = mailTab.rows[i];

tr.cells[0].childNodes[0].checked = isSel;

}

}

/script

/head

body

table id=”tb” border=”1″ style=”border-collapse: collapse;”

tr

th序列/th

th標題/th

th發郵人/th

th發件時間/th

/tr

!– 循環增加 —

!–　全選 —

tr

td colspan=”4″

input id=”selA” type=”checkbox” /label for=”selA”全選/label

a href=”#” id=”delSel”刪除/a/td

/tr

/table

/body

/html

input 加個id就可以了，如：

tdinput type=”text” id=”t1″/td

然後js里用：

document.getElementById(“t1”).value 來取得input的值

解釋內容見下面代碼中的注釋：

function doSubmit(){

    // 獲取用戶名 （name = “userName” 的元素的值）

    var userName=document.getElementById(“userName”).value;

    // 獲取用戶密碼 （name = “userPass” 的元素的值）

    var userPass=document.getElementById(“userPass”).value;

    // 在 id=”TableA” 的表格最下方插入一行

    row = document.getElementById(“TableA”).insertRow(-1);

    // 如果插入成功

    if(row!=null){

        // 在這一行插入一個單元格

        cell=row.insertCell();

        // 將此單元格的內容設置為 用戶名

        cell.innerHTML=userName;

        // 再插入一個單元格

        cell = row.insertCell();

        // 將此單元格的內容設置為 用戶密碼

        cell.innerHTML=userPass;

        // 再插入一個單元格

        cell = row.insertCell();

        // 將此單元格的內容設置為空

        cell.innerHTML=” “;

    }

    // 返回 false

    return false;

}

====更新分割線====

題主更新了問題，因此我也再多說兩句。

1、 if 判斷的作用是，確認 “插入行” 的操作是否成功完成。因為如果插入不成功，那麼後面的代碼就不應該被執行，否則會引起錯誤。

2、 怎麼控制添加的順序？就是按照你代碼的執行順序。第一次 insertCell 添加第一個單元格，第n次添加第n個。

3、 為什麼要return false，因為這個函數應該被註冊到了一個表單的提交事件里，return false 可以阻止表單被真正的提交。具體請學習 DOM 的 “事件” 相關知識點。

以上，請採納，請給分。