Hi i'm a newbe to javascript and i would like to create a function which will allow me to insert additional row to html table after every x rows.

I appreciate every idea

Recommended Answers

All 3 Replies

Hi
You can use insertRow() to insert a row to html table.
Some thing like this...
var rowIndex = 0; // Assign the row index
var row = document.getElementById('htmlTable').insertRow(rowIndex );
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
...
...

var celln = row.insertCell(n);

cell1.innerHTML="Cell 1";
cell2.innerHTML="Cell 2";
...
...

celln.innerHTML="Cell n";

Regards
Anish

thanks for response!it was very helpful!

regards

Here's a little example, that allow's you to specify how many row's/cell's to be added and deleted. As long as the inputted value is lower than than the rowIndex present in the table, then the value wil be incremented to add new row's / cell's.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript DEMO : Inserting Dynamic Row's into Table</title>
<style type="text/css">
/* <![CDATA[ */
table {
  border : 1px solid #D0D0D0;
  border-collapse : collapse;
  text-align : left;
  width : 70%;
}
td, th {
  border-bottom : 1px solid #D0D0D0;
  padding : .300em;
}
input[type='text'] {
  border-bottom : 2px solid #D0D0D0;
  color : #696969;
  font-weight : bold;
  height : 17px;
  text-align : center;
}
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var viaID, viaTN, table;
var r1, c1;
var addROW, addCELL;
var tableElement;

viaID = Boolean( document.getElementById );
viaTN = Boolean( document.getElementsByTagName ); 
tableElement = function() {
del = function() {
      do {  
      table.deleteRow( r1 );
      r1--; 
      } while( r1 !== 0 )
};
add = function() {
table = (( viaTN ) ? document.getElementsByTagName("table")["table1"].getElementsByTagName("tfoot")["tF"] : (( viaID ) ? document.getElementById("table1").children["tF"] : document.all.table1.all.tF ));

oLen = table.rows.length;
c1 = parseInt((( viaID ) ? document.getElementById("cOne").value : document.all.cOne.value ));
n = oLen;
r1 = parseInt((( viaID ) ? document.getElementById("rOne").value : document.all.rOne.value )); 
   if (( r1 < ( oLen + 1 )) && ( r1 !== NaN )) {
      try {
         for ( var i = 1; i <= r1; i++ ) {
      addROW = table.insertRow( i );
// The maximum cell allowed per entry is set to 3. So if you will input any number, more than 3, then it will be automatically converted 3.
// I've done this to prevent overlapping in the table. 

         for ( var x = 0; x < (( c1 > 3 ) ? 3 : c1 ); x++ ) {
         addCELL = addROW.insertCell( x );
         text = document.createTextNode("cell " + ( x ));
addCELL.appendChild( text );
         } 
      } 
   }  
   catch( e ) {      
        alert("Failed to add new elements!"); 
      }
   }

   else { 
   alert("Inserted row's must be lower or equals to " + oLen );
         } 
      }
   return { 
   add : add,
   del : del
   }
}();

// ]]>
</script> 
</head>
<body>
<div id="main">
<table id="table1" frame="box" rules="none" summary="Dynamic table">
<caption><span>JavaScript DEMO:</span> Inserting Dynamic Row's in the Table</caption>
<colgroup align="center">
<col />
<col />
<col />
</colgroup>
<thead id="tH">
<tr>
<th><label for="rOne">Table Row</label></th>
<th><label for="cOne">Table Cell</label></th>
<th><button id="btn" name="btn" onclick="tableElement.add();">Insert Element's!</button></th>
</tr>
</thead>
<tfoot id="tF">
<tr>
<th>Added Element's</th>
<td colspan="2"><div id="odd" style="text-align: left;"></div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="text" id="rOne" name="rOne" value="" size="10" /></td>
<td><input type="text" id="cOne" name="cOne" value="" size="10" /></td>
<td style="background-color : #ccc;"><button id="d" name="d" onclick="del();">Remove Element's!</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.