JS实现动态修改table及合并单元格的方法示例
本文实例讲述了JS实现动态修改table及合并单元格的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<script language="javascript" type="text/javascript">
function maketotal(){
var pageCount=4;
var currenttype;
var indexstr="";
var tabObj = document.getElementById("printtable");
//行数
var rowCount = tabObj.rows.length;
//列数
var cellCount = tabObj.rows[0].cells.length;
for(var q=1;q<rowCount;q++){
choosetype=tabObj.rows[q].cells[0].innerHTML;
if(q==1){
currenttype=choosetype;
}
if(currenttype!=choosetype){
indexstr=q+","+indexstr;
}
}
alert(indexstr.split(",").length);
for(var p=0;p<indexstr.split(",").length;p++){
var temp=indexstr.split(",")[p];
if(temp!=""){
var newRow = tabObj.insertRow(temp);
for(var g=0;g<cellCount;g++)
{
var littleCount=0;
for(var h=1;h<rowCount;h++){
if(tabObj.rows[h].cells[g]){
if(g>1){
littleCount=littleCount+parseInt(tabObj.rows[h].cells[g].innerHTML);
}
}
}
if(g>1&&g!=6){
newRow.insertCell(g).innerHTML=littleCount;
}else if(g==6){
newRow.insertCell(g).innerHTML="";
}else{
newRow.insertCell(g).innerHTML="小计";
}
}
}
}
var newRow = tabObj.insertRow(0);
for(var g=0;g<cellCount;g++)
{
if(g==0){
//newRow.insertCell(g).innerHTML="头部";
}else{
//newRow.insertCell(g).innerHTML="头部";
}
//alert(tabObj.rows[1].cells[g]);
newRow.insertCell(g).innerHTML="头部";
//tabObj.rows[0].cells[g].colsSpan =2;
//tabObj.rows[0].cells[g].rowsSpan =2;
tabObj.rows[1].cells[g].style.background="#CCCCCC";
tabObj.rows[0].cells[g].style.background="#CCCCCC";
//tabObj.rows[0].cells[g].rowSpan=2
}
tabObj.rows[0].cells[2].colSpan =2;
tabObj.rows[0].cells[2].innerHTML="反映形式";
tabObj.rows[0].cells[3].colSpan =2;
tabObj.rows[0].cells[3].innerHTML="待处理业务数";
tabObj.rows[0].cells[4].colSpan =1;
tabObj.rows[0].cells[4].innerHTML="反映形式";
tabObj.rows[0].cells[5].colSpan=1;
tabObj.rows[0].cells[5].innerHTML="反映形式";
tabObj.rows[0].cells[6].colSpan=7;
tabObj.rows[0].cells[6].innerHTML="";
tabObj.rows[0].cells[7].style.display = "none";
tabObj.rows[0].cells[8].style.display = "none";
tabObj.rows[0].cells[9].style.display = "none";
tabObj.rows[0].cells[10].style.display = "none";
tabObj.rows[0].cells[11].style.display = "none";
tabObj.rows[0].cells[12].style.display = "none";
tabObj.rows[0].cells[13].style.display = "none";
tabObj.rows[0].cells[14].style.display = "none";
}
</script>
<script language="javascript" type="text/javascript">
document.onreadystatechange = subSomething;
function subSomething()
{
if(document.readyState == "complete")
maketotal();
}
</script>
</head>
<body>
<input type="button" onclick="maketotal()" value="遍历table"/>
<DIV class=pageNext>
<H1 id=printtitle align=center><FONT style="FONT-FAMILY: 隶书; FONT-SIZE: 34px">反映来源统计</FONT></H1>
<TABLE border="1" id="printtable" style="TEXT-ALIGN: center; BORDER-COLLAPSE: collapse" class=di width="100%">
<TBODY>
<TR>
<TD>处理分类</TD>
<TD>处理内容</TD>
<TD>来电数</TD>
<TD>来访数</TD>
<TD>接办数</TD>
<TD>待办数</TD>
<TD>回复率</TD>
<TD>fffff</TD>
<TD>水厂总部</TD>
<TD>营业厅</TD>
<TD>客户服务中心</TD>
<TD>管线部</TD>
<TD>信息中心</TD>
<TD>稽查科</TD>
<TD>水质检测</TD>
<TD>安装公司</TD></TR>
<TR height=30>
<TD>测试分类</TD>
<TD>水务局</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD></TR>
<TR height=30>
<TD>测试分类</TD>
<TD>投诉</TD>
<TD>0</TD>
<TD>0</TD>
<TD>40</TD>
<TD>2</TD>
<TD>95.24</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD></TR>
<TR height=30>
<TD>测试分类</TD>
<TD>网格中心</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD></TR>
<TR height=30>
<TD>测试分类</TD>
<TD>居民用户</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD></TR>
<TR height=30>
<TD>测试分类</TD>
<TD>政府办</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD></TR>
<TR height=30>
<TD>测试分类</TD>
<TD>单位用户</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD></TR>
<TR height=30>
<TD>合计</TD>
<TD></TD>
<TD>0</TD>
<TD>0</TD>
<TD>40</TD>
<TD>2</TD>
<TD>95.24</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD>
<TD>0</TD></TR></TBODY></TABLE></DIV>
</body>
</html>
运行效果图如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
先上效果图: CSS: 复制代码 代码如下: body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/selta
-
javascript实现的使用方向键控制光标在table单元格中切换
效果截图: html 代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl
-
Js实现动态添加删除Table行示例
最近做项目遇到要动态添加.删除表格行的操作,实现如下 html代码 复制代码 代码如下: <table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor=&qu
-
javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创
从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考我们以前发布的文章. function mouseover(){ var ObjTd=window.event.srcElement; var ObjTr=ObjTd.parentElement; var y=ObjTr.rowIndex; var x=ObjTd.cellIndex; alert(x+" "+y); }
-
Js获取table当前tr行的值的代码
下面的代码主要是学习控制表格里面的一些操作,代码都是直接写在表格里面的, 大家可以改成事件绑定的. Js获取 table当前行的值 var selectedTr=null; function c1(obj){ obj.style.backgroundColor='blue'; //把点到的那一行变希望的颜色; if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor"); if(selectedTr==
-
JS获取Table中td值的方法
本文实例讲述了JS获取Table中td值的方法.分享给大家供大家参考.具体如下: 1.当要获取多行中的任意TD时,采用给每个TD设置一个共同的class 复制代码 代码如下: <tr> <td style="display: none" id="td2">002</td> <td style="text-align: left;text-decoration:underline;" i
-
javascript table美化鼠标滑动单元格变色
http://www.w3.org/TR/html4/strict.dtd"> orbitz-like behavior for hovering over table cells .cssguycomments {background:#eee;border:#ddd;padding:8px;margin-bottom:40px;} .cssguycomments p {font:normal 12px/18px verdana;} table {border-collapse:coll
-
JS使用for循环遍历Table的所有单元格内容
JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j
-
JS与jQuery遍历Table所有单元格内容的方法
本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /
-
JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t
-
js添加table的行和列 具体实现方法
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></titl
-
利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var
-
JS 实现Table相同行的单元格自动合并示例代码
代码如下,可直接运行: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME=&q