English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home Page
  3. Experience Notes
  4. Main Content

Example of Dynamically Modifying Table and Merging Cells with JS

This example demonstrates how to dynamically modify tables and merge cells using JavaScript. Shared for reference, as follows:

<!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");
  //Row count
    var rowCount = tabObj.rows.length;
  //Column count
    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="";
   }
   newRow.insertCell(g).innerHTML="Total";
   }
  }
  }
 }
 var newRow = tabObj.insertRow(0);
 for(var g=0;g<cellCount;g++)
 {
  if(g==0){
  //newRow.insertCell(g).innerHTML="Header";
  }
  //newRow.insertCell(g).innerHTML="Header";
  }
  //alert(tabObj.rows[1].cells[g]);
  newRow.insertCell(g).innerHTML="Header";
  //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="Reflection Form";
 tabObj.rows[0].cells[3].colSpan =2;
 tabObj.rows[0].cells[3].innerHTML="Number of Pending Business";
 tabObj.rows[0].cells[4].colSpan =1;
 tabObj.rows[0].cells[4].innerHTML="Reflection Form";
 tabObj.rows[0].cells[5].colSpan=1;
 tabObj.rows[0].cells[5].innerHTML="Reflection Form";
 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="Traverse table"/>
    <DIV class=pageNext>
<H1 id=printtitle align=center><FONT style="FONT-FAMILY: Lishu; FONT-SIZE: 34px">Statistics of Reflection Sources</FONT></H1>
<TABLE border="1" id="printtable" style="TEXT-ALIGN: center; BORDER-COLLAPSE: collapse" class=di width="100%">
<TBODY><
<TR><
<TD>Handling Classification</TD>
<TD>Content of Handling</TD>
<TD>Call In Numbers</TD>
<TD>Visits</TD>
<TD>Received Cases</TD>
<TD>Pending Tasks</TD>
<TD>Response Rate</TD>
<TD>fffff</TD>
<TD>Waterworks Headquarter</TD>
<TD>Business Hall</TD>
<TD>Customer Service Center</TD>
<TD>Pipeline Department</TD>
<TD>Information Center</TD>
<TD>Inspection Department</TD>
<TD>Water Quality Inspection</TD>
<TD>Installation Company</TD></TR>
<TR height=30>
<TD>Test Category</TD>
<TD>Waterworks Bureau</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>Test Category</TD>
<TD>Complaints</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>Test Category</TD>
<TD>Grid Center</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>Test Category</TD>
<TD>Resident Users</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>Test Category</TD>
<TD>Government Office</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>Test Category</TD>
<TD>Unit Users</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>Total</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>

The running effect diagram is as follows:

Readers who are interested in more content related to JavaScript can check the special topics on this site: 'Summary of JavaScript DOM Manipulation Techniques', 'Summary of JavaScript Array Manipulation Techniques', 'Summary of JavaScript Sorting Algorithms', 'Summary of JavaScript Traversal Algorithms and Techniques', 'Summary of JavaScript Mathematical Operation Usage', 'Summary of JavaScript Data Structures and Algorithm Techniques', 'Summary of JavaScript Search Algorithm Techniques', and 'Summary of JavaScript Error and Debugging Techniques'.

I hope the content described in this article will be helpful to everyone's JavaScript program design.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright. It has not been edited by humans and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w.3Please report any violations by email to codebox.com (replace # with @), and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.

Basic Tutorial
You May Also Like