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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
基于node.js之调试器详解
Aug 22 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
原生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
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
javascript call方法使用说明
2010/01/11 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
如何利用Python 进行边缘检测
2020/10/14 Python
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
中学生校园广播稿
2014/01/16 职场文书
基层干部十八大感言
2014/01/19 职场文书
委托书如何写
2014/08/30 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
光荣之路观后感
2015/06/12 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js