how to add rows dynamically in the table containing three asp.net server controls for user input

Question

0.00/5 (No votes)

See more:

Hi
A table having 5 rows and 3 columns,
each row contain 3 asp.net server controls textbox for userinput.

i want to dynamically add more rows in table on buttonclick while each new row contain 3 textboxes for user input.

i am not expert of client side, currently i am doing static work by hiding rows (10 extra rows) and displaying them one by one on button click, but this is not efficent work and also have limitations.

Thankx in Advance.

Zain Ul Abedin

Posted 9-Sep-11 0:39am

Zain Ul Abedin

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Niral Soni · Answer 1 · 2011-09-09T03:41:00

Try this simple HTML and JavaScript code. Hope it may help you to resolve your problem.

HTML

<html>
  <HEAD>
	<script type="text/javascript">
		function insRow() {
			var tbl = document.getElementById('myTable');
			var len = tbl.rows.length;
			var row = tbl.insertRow(len);
			for(var i  = 0; i < tbl.rows[0].cells.length-1; i++) {
				row.insertCell(i).innerHTML="<input type=text>";
			}
			row.insertCell(tbl.rows[0].cells.length-1).innerHTML='<INPUT TYPE="button" ONCLICK="delRow(this)" VALUE="Delete Row">';
		}

		function delRow(obj) {
			var row = obj;
			while(row.nodeName.toLowerCase() != 'tr') {
				row = row.parentNode;
			}
			var tbl = document.getElementById('myTable');
			tbl.deleteRow(row.rowIndex);

		}
	</script>
  </HEAD>
  <BODY>
    <table id="myTable" border="1" width="50%" cellspacing="0" cellpadding="2">
      <tr>
	<td>cell 1</td>
	<td>cell 2</td>
	<td>cell 3</td>
	<td><INPUT TYPE="button" ONCLICK="insRow()" VALUE="Insert Row"></td>
      </tr>
    </table><br>
    <FORM>


    </FORM>
  </BODY>
</HTML>
</br></html>

Thanks & Regards,
Niral Soni