首页 > 编程知识 正文

js表格跨列代码(实现表格跨列)

时间:2023-12-24 12:05:42 阅读:320850 作者:YLGL

本文目录一览:

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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。