Member Avatar for vamsikrishna981 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>



<SCRIPT language="javascript">
function addRow(tableID) {


var table = document.getElementById(tableID);


var rowCount = table.rows.length;
var row = table.insertRow(rowCount);


var colCount =table.rows[0].cells.length;


for(var i=0; i<colCount; i++) {


var newcell = row.insertCell(i);


newcell.innerHTML = table.rows[0].cells.innerHTML ;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;


}
}


if(table.rows.length>=10){
document.getElementById('addrw1').style.visibility='hidden';
}
}


function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;


for(var i=0; i<rowCount; i++) {
var row = table.rows;
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot be delete ");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}


}
}catch(e) {
alert(e);
}
}


function add5row(tableID) {


var table = document.getElementById(tableID);


var rowCount = table.rows.length;
var row = table.insertRow(rowCount);


var colCount =table.rows[0].cells.length;


for(var i=0; i<colCount; i++) {


var newcell = row.insertCell(i);


newcell.innerHTML = table.rows[0].cells.innerHTML ;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;


}
}


if(table.rows.length>=10){
document.getElementById('addrw1').style.visibility='hidden';
}
}


</SCRIPT>
</head>


<body>
<div id="fields" style="background:#036;">
<TABLE id="dataTable" width="600px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>NAME:&nbsp;&nbsp;<INPUT type="text" name="txt"/></TD>
<TD>E-MAIL:&nbsp;&nbsp;<input type="text" name="txt"/></TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>NAME:&nbsp;&nbsp;<INPUT type="text" name="txt"/></TD>
<TD>E-MAIL:&nbsp;&nbsp;<input type="text" name="txt"/></TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>NAME:&nbsp;&nbsp;<INPUT type="text" name="txt"/></TD>
<TD>E-MAIL:&nbsp;&nbsp;<input type="text" name="txt"/></TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>NAME:&nbsp;&nbsp;<INPUT type="text" name="txt"/></TD>
<TD>E-MAIL:&nbsp;&nbsp;<input type="text" name="txt"/></TD>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD>NAME:&nbsp;&nbsp;<INPUT type="text" name="txt"/></TD>
<TD>E-MAIL:&nbsp;&nbsp;<input type="text" name="txt"/></TD>
</TR>


</TABLE></div>


<INPUT name="addrw1" type="button" id="addrw1" onclick="addRow('dataTable')" value="Add Row" />


<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />



<input type="button" name="button" id="button" value="Add 5more" onclick="add5row('dataTable')"/>
</body>
</html>

Hey can any one please let me know how to add 5 rows dynamically by clicking on add5rows button

Edited by Nick Evan because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 572 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for stbuchok

Here is a simple example of how to do it (I'm using jquery to make it easier):

<html>

<head>

<script src="jquery-1.6.4.min.js"></script>


<script>

$(function(){
	$('button').click(function(){
		var rowsToAdd = $('input[type=text]').val();

		if(rowsToAdd > 0){

			for(var i = 0; i < rowsToAdd; i++){
				$('table').append('<tr><td>Row Added</td></tr>');
			}
		}
	});
});

</script>

</head>

<body>

<table>
	<tr>
		<td>
		A row in the table
		</td>
	</tr>
</table>

<!-- The textbox allows you to enter a number which will be how many rows to add. -->
<input type="text" /><button>Add Rows</button>

</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.