本文目录一览:
- 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