JS实现动态修改table及合并单元格的方法示例


Posted in Javascript onFebruary 20, 2017

本文实例讲述了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>

运行效果图如下:

JS实现动态修改table及合并单元格的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
原生javascript实现读写CSS样式的方法详解
Feb 20 #Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 #Javascript
js中new一个对象的过程
Feb 20 #Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 #Javascript
jQuery实现鼠标跟随效果
Feb 20 #Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 #Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 #Javascript
You might like
一个程序下载的管理程序(三)
2006/10/09 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php递归创建目录的方法
2015/02/02 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python实现ipsec开权限实例
2014/11/11 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
遗体告别仪式答谢词
2014/01/23 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
学用政策心得体会
2014/09/10 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
学校捐书活动总结
2015/05/08 职场文书
大学学生会辞职信
2015/05/13 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书