js表格跨列代碼（實現表格跨列）

本文目錄一覽：

• 1、JS（JavaScript）創建不規則表格 ,請高手幫忙實現一下啊
• 2、js insertcell 怎麼跨列
• 3、編寫一段代碼，如何用JS來實現插入幾行幾列的表格的功能，希望好心人能幫幫忙呢
• 4、怎麼用js做一個表格
• 5、HTML中 table 中的跨行跨列怎麼拼寫?
• 6、求一段JS 表格 列求和 代碼

JS（JavaScript）創建不規則表格 ,請高手幫忙實現一下啊

只能大概告訴你JavaScript操作表格的方法:

1) 獲得表格對象

var tb = document.getElementById(idOfTable); // idOfTable為表格元素的ID, 也可以用document.createElement動態創建, 然後調用document.body.appendChild方法添加到頁面上

2) 向表格中添加行

var row = tb.insertRow(rowIdx); // rowIdx是新增的行在表格中的位置索引, 從0開始

3) 向行中添加單元格

var cell = row.insertCell(cellIdx); // cellIdx是新增單元格在行中的位置索引, 從0開始

使用以上方法就可以添加表格中的行與單元格, 如果要跨行或跨列則分別使用單元格對象rowSpan和cellSpan屬性控制即可.

2013/8/23, 把你的代碼發來, 我試試看andy_sun123@hotmail.com .

js insertcell 怎麼跨列

代碼如下:

!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

編寫一段代碼，如何用JS來實現插入幾行幾列的表格的功能，希望好心人能幫幫忙呢

頁面代碼：

body

h1 style=”color: blue”

現在要插入幾行幾列的表格了，請點擊按鈕

input type=”button” value=”插入表”

onclick=”javascript:insertTable(5,6)” /

/h1

h1 style=”color: #fcdb33″

您也可以刪除創建的所有表格，請點擊按鈕

input type=”button” id=”del” value=”刪除表格”

onclick=”javascript:delTable()” /

/h1

div id=”container”/div

/body

js代碼：

/**

* 插入表格

* @param row 行數

* @param col 列數

* @return

*/

function insertTable(row,col) {

//頁面要有個標籤可以放即將創建的table，我用了div，你也可以用別的標籤

var div = document.getElementById(“container”);

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

div.appendChild(table);

table.border = “1px”;

table.style.width = “750px”;

table.style.height = “250px”;

table.style.color = “green”;

//少了這個tbody元素，在IE下將無法正常顯示table

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

table.appendChild(body);

for ( var n = 0; n parseInt(row); n++) {

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

body.appendChild(tr);

tr.style.color = “red”;

for ( var i = 0; i parseInt(col); i++) {

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

tr.appendChild(td);

td.style.color = “orange”;

var center = document.createElement(“center”);

td.appendChild(center);

center.innerHTML=”行列”;

}

}

}

/**

* 刪除表格

*

* @return

*/

function delTable() {

var div = document.getElementById(“container”);

var tCount = div.childNodes.length;

if (tCount 0) {

var t = document.getElementsByTagName(“table”)[0];

if (div == t.parentNode)

div.removeChild(t);

} else {

alert(“已經沒有表格了！！”);

}

}

怎麼用js做一個表格

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

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

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

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

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

HTML中 table 中的跨行跨列怎麼拼寫?

Html中的table元素中，colspan 屬性規定單元格可橫跨的列數即跨列，rowspan 屬性規定單元格可橫跨的行數跨行。

兩個屬性的代碼實例如下：

1、表格單元橫跨兩列的表格：

table border=”1″

  tr

    thMonth/th

    thSavings/th

  /tr

  tr

    td colspan=”2″January/td!–設置橫跨兩列–

  /tr

  tr

    td colspan=”2″February/td!–設置橫跨兩列–

  /tr

/table

結果：

2、表格單元橫跨兩行的表格：

table border=”1″

  tr

    thMonth/th

    thSavings/th

  /tr

  tr

    tdJanuary/td

    td$100.00/td

    td rowspan=”2″$50/td!–設置橫跨兩行–

  /tr

  tr

    tdFebruary/td

    td$10.00/td

  /tr

/table

求一段JS 表格 列求和 代碼

table width=”200″ border=”0″ id=”table”

  tr

    td名稱/td

    td圖片/td

    td價格/td

    td操作/td

  /tr

  tr

    td /td

    td /td

    td10/td

    td /td

  /tr

  tr

    td /td

    td /td

    td10/td

    td /td

  /tr

  tr

    td /td

    td /td

    td10/td

    td /td

  /tr

  tr

    td /td

    td /td

    td10/td

    td /td

  /tr

  tr

    td /td

    td合計/td

    td /td

    td /td

  /tr

/table

script type=”text/javascript”

    var calcTotal=function(table,column){//合計，表格對象，對哪一列進行合計，第一列從0開始

        var trs=table.getElementsByTagName(‘tr’);

        var start=1,//忽略第一行的表頭

            end=trs.length-1;//忽略最後合計的一行

        var total=0;

        for(var i=start;iend;i++){

            var td=trs[i].getElementsByTagName(‘td’)[column];

            var t=parseFloat(td.innerHTML);

            if(t)total+=t;

        }

        trs.getElementsByTagName(‘td’)[column].innerHTML=total;

    };

    calcTotal(document.getElementById(‘table’),2);

/script