JS實現(xiàn)動態(tài)修改table及合并單元格的方法示例

更新時間：2017年02月20日 11:22:55 作者：酷云

這篇文章主要介紹了JS實現(xiàn)動態(tài)修改table及合并單元格的方法,結合完整實例形式分析了JS動態(tài)遍歷及修改table單元格的具體操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)動態(tài)修改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");
  //行數(shù)
    var rowCount = tabObj.rows.length;
  //列數(shù)
    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="待處理業(yè)務數(shù)";
 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">反映來源統(tǒng)計</FONT></H1>
<TABLE border="1" id="printtable" style="TEXT-ALIGN: center; BORDER-COLLAPSE: collapse" class=di width="100%">
<TBODY>
<TR>
<TD>處理分類</TD>
<TD>處理內(nèi)容</TD>
<TD>來電數(shù)</TD>
<TD>來訪數(shù)</TD>
<TD>接辦數(shù)</TD>
<TD>待辦數(shù)</TD>
<TD>回復率</TD>
<TD>fffff</TD>
<TD>水廠總部</TD>
<TD>營業(yè)廳</TD>
<TD>客戶服務中心</TD>
<TD>管線部</TD>
<TD>信息中心</TD>
<TD>稽查科</TD>
<TD>水質(zhì)檢測</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>網(wǎng)格中心</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相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript數(shù)組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript數(shù)學運算用法總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調(diào)試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

JavaScript節(jié)點及列表操作實例小結
這篇文章主要介紹了JavaScript節(jié)點及列表操作的方法,以實例的形式較為詳細的總結了javascript針對節(jié)點操作的相關技巧,并給出了一個完整的節(jié)點操作方法實例總結,需要的朋友可以參考下
2015-08-08
js 3種歸并操作的實例代碼
這篇文章介紹了js 3種歸并操作的實例代碼，有需要的朋友可以參考一下
2013-10-10
JavaScript event對象整理及詳細介紹
這篇文章主要介紹了JavaScript event對象整理及詳細介紹的相關資料,需要的朋友可以參考下
2016-10-10
APP中javascript+css3實現(xiàn)下拉刷新效果
本文給大家分享的是如何在APP中使用javascript結合CSS3實現(xiàn)下拉刷新特效的代碼，非常的簡單實用，有需要的小伙伴可以參考下。
2016-01-01
微信小程序?qū)崿F(xiàn)文字滾動
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文字滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
JS實現(xiàn)的貪吃蛇游戲案例詳解
這篇文章主要介紹了JS實現(xiàn)的貪吃蛇游戲,結合具體案例形式分析了javascript實現(xiàn)貪吃蛇的相關步驟、原理、算法操作技巧與相關注意事項,需要的朋友可以參考下
2019-05-05
Js跳出兩級循環(huán)方法代碼實例
這篇文章主要介紹了Js跳出兩級循環(huán)方法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-09-09
JavaScript作用域鏈示例分享
作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域鏈作簡單的介紹，希望能幫助大家更好的學習JavaScript。
2014-05-05
js小數(shù)運算出現(xiàn)多位小數(shù)如何解決
關于JavaScript小數(shù)進行加、減、乘、除出現(xiàn)多位小數(shù)問題，自己研究了一下，而且作了相關的測試，收獲不少知識點，需要的朋友可以參考下
2015-10-10
JS時間戳轉(zhuǎn)換為常用時間格式的三種方式
我們在開發(fā)中經(jīng)常需要把時間戳轉(zhuǎn)化成日期格式,下面這篇文章主要給大家介紹了關于JS時間戳轉(zhuǎn)換為常用時間格式的三種主要方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-04-04