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
visnia 0 Newbie Poster
anish.anick 0 Light Poster
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
visnia 0 Newbie Poster
thanks for response!it was very helpful!
regards
essential 84 Posting Shark Featured Poster
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.