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(",");
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>
[p]运行效果图如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- JS实现动态给标签控件添加事件的方法示例
- js实现对table动态添加、删除和更新的方法
- JS实现给json数组动态赋值的方法示例
- js实现对table动态添加、删除和更新的方法
- jQuery实现动态给table赋值的方法示例
- JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
- JS实现动态添加DOM节点和事件的方法示例
- js动态修改input输入框的type属性(实现方法解析)
- JS简单实现动态添加HTML标记的方法示例
- JS动态添加Table的TR，TD实现方法
- JS实现动态生成html table表格的方法分析
- js动态修改input输入框的type属性(实现方法解析)
- 用table，js实现web动态取数据并实现分页效果
- js实现动态创建txt框。今天学生问此问题，做个小例子，大家也说说还有什么实现的方法。
- js实现table单元格高宽调整,兼容合并单元格(效果版)
- 用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
- js 提交form表单时，action的动态修改方法
- 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
- js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现,可参考代码）