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

2019-11-19 17:29:46

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JS實(shí)現(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è)務(wù)數(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>回復(fù)率</TD><TD>fffff</TD><TD>水廠總部</TD><TD>營業(yè)廳</TD><TD>客戶服務(wù)中心</TD><TD>管線部</TD><TD>信息中心</TD><TD>稽查科</TD><TD>水質(zhì)檢測</TD><TD>安裝公司</TD></TR><TR height=30><TD>測試分類</TD><TD>水務(wù)局</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>

運(yùn)行效果圖如下：