How to add a Row to a table dynamically
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 9 of 9

Thread: How to add a Row to a table dynamically

Hybrid View

  1. #1
    Join Date
    Sep 2004
    Posts
    11

    How to add a Row to a table dynamically

    What i have is a table(1) with some information...And another table(2) with same Header fields as the above in the same HTML page...Initially the second table is empty and the first is populated with some rows.. If i click on a row in the first table, i need that row to be added in the second table...Its all about selectig a row from one table and inserting in another table...


    I traced the row object on which I clicked with 'obj= Event.srcElement' And using obj.innerHTML(it contains only TD elements) , I got all the TD elements of that row and I made a String like ( str="<tr>"+ obj.innerHTML+"</tr>" ).... Can i add this row to another table Dynamically... I tried this with (tbody.innerHTML=str) .but it does not work...Can u please help me...

  2. #2
    Join Date
    Dec 2004
    Posts
    438

    Re: How to add a Row to a table dynamically

    Do you want to do this on the client side?

  3. #3
    Join Date
    Oct 2004
    Posts
    4

    Re: How to add a Row to a table dynamically

    I think you way to add a row is ok.Can you paste your code?

  4. #4
    Join Date
    Feb 2014
    Location
    Pune
    Posts
    2

    Re: How to add a Row to a table dynamically

    Quote Originally Posted by lee_j View Post
    I think you way to add a row is ok.Can you paste your code?
    Hi................


    <!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">

    <script language="javascript" type="text/javascript">


    var j=2;
    function addRow()

    {

    var srNo=j;
    var name=document.frm1.name.value;
    var mail=document.frm1.mail.value;
    var con=document.frm1.contactNum.value;
    var des=document.frm1.desig.value;

    var tbl = document.getElementById('table1');
    var lastRow = tbl.rows.length;
    var iteration = lastRow - 1;
    var row = tbl.insertRow(lastRow);

    j++;

    var firstCell = row.insertCell(0);
    var inputSrNo = document.createElement('input');
    inputSrNo.type = 'text';
    inputSrNo.name = 'txtSrNo' + iteration;
    inputSrNo.id = 'txtSrNo' + iteration;
    inputSrNo.size = 10;
    inputSrNo.maxlength = 10;
    inputSrNo.value=srNo;
    firstCell.appendChild(inputSrNo);




    var secondCell = row.insertCell(1);
    var inputName = document.createElement('input');
    inputName.type = 'text';
    inputName.name = 'txtName' + iteration;
    inputName.id = 'txtName' + iteration;
    inputName.size = 20;
    inputName.maxlength = 20;
    inputName.value=name;
    secondCell.appendChild(inputName);



    var ThirdCell = row.insertCell(2);
    var inputMail = document.createElement('input');
    inputMail.type = 'text';
    inputMail.name = 'txtMail' + iteration;
    inputMail.id = 'txtMail' + iteration;
    inputMail.size = 20;
    inputMail.maxlength = 20;
    inputMail.value=mail;
    ThirdCell.appendChild(inputMail);



    var fourthCell = row.insertCell(3);
    var inputCon = document.createElement('input');
    inputCon.type = 'text';
    inputCon.name = 'txtCon' + iteration;
    inputCon.id = 'txtCon' + iteration;
    inputCon.size = 20;
    inputCon.maxlength = 20;
    inputCon.value=con;
    fourthCell.appendChild(inputCon);

    var fifthCell = row.insertCell(4);
    var inputDesig = document.createElement('input');
    inputDesig.type = 'text';
    inputDesig.name = 'txtDes' + iteration;
    inputDesig.id = 'txtDes' + iteration;
    inputDesig.size = 20;
    inputDesig.maxlength = 20;
    inputDesig.value=des;
    fifthCell.appendChild(inputDesig);


    var sixthCell = row.insertCell(5);
    var inputbutton = document.createElement('input');
    inputbutton.type = 'button';
    inputbutton.name = 'add';
    inputbutton.id = 'add';
    inputbutton.value="Add";
    inputbutton.setAttribute("onClick","addRow()");
    sixthCell.appendChild(inputbutton);


    var sevenCell = row.insertCell(6);
    var inputbutton1 = document.createElement('input');
    inputbutton1.type = 'button';
    inputbutton1.name = 'del';
    inputbutton1.id = 'del';
    inputbutton1.value="Delete";
    inputbutton1.setAttribute("onClick","deleterow()");
    sevenCell.appendChild(inputbutton1);





    }


    function deleterow()
    {
    var tbl = document.getElementById('table1');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
    }

    </script>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Dynamic Row</title></head>



    <body>

    <form action="" method="get" name="frm1">

    <table width="40%" border="0" cellpadding="0" cellspacing="0" id="table1" align="center">

    <tr>
    <td width="100">Sr No</td>
    <td>Name</td>
    <td>E-Mail</td>
    <td>Contact</td>
    <td>Designation</td>


    </tr>


    <tr>
    <td><input name="srno" type="text" id="srno" size="10" maxlength="10" readonly="readonly"/></td>
    <td><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
    <td><input name="mail" type="text" id="mail" size="20" maxlength="20" /></td>
    <td><input name="contactNum" type="text" id="contactNum" size="20"/></td>
    <td><input name="desig" type="text" id="desig" size="20" /></td>
    <td><input type="button" value="Add" onclick="addRow();" /></td>
    <td><input type="button" value="Delete" onclick="deleterow();" /></td>

    </tr>

    </table>

    </form>
    </body>
    </html>

  5. #5
    Join Date
    Nov 2004
    Location
    Slough, UK
    Posts
    184

    Re: How to add a Row to a table dynamically

    Not quite sure what you are after here, but you can add or remove rows from a table dynamically. The following code demonstrates how to dynamically add and remove rows, it has been tested in IE6, Netscape 7 and Firefox 1.0:
    HTML Code:
       <html>
       	<head>
       		<title>Add or Remove Rows Dynamically</title>
       		<script type="text/javascript">
       			<!--
       			var count = 1;
       			var nRows = 2;
       			
       			function addRow() {
       				
     				var tBody = document.getElementById('theBody');
     				var newRow = document.createElement('tr');
     				var col1 = document.createElement('td');
     				var col2 = document.createElement('td');
     				var col3 = document.createElement('td');
     				var rA = document.createElement('a');
       
     				newRow.setAttribute('id', 'n' + count);
       				
       		    	   rA.setAttribute('href', 'javascript:removeRow(\'n' + count + '\');');
     				rA.appendChild(document.createTextNode('Remove'));
       					
     		 	   col1.appendChild(document.createTextNode('Col 1 Row ' + nRows));
     			    col2.appendChild(document.createTextNode('Col 2 Row ' + nRows));
       				col3.appendChild(rA);
       
       				newRow.appendChild(col1);
       				newRow.appendChild(col2);
       				newRow.appendChild(col3);
       
       				tBody.appendChild(newRow);
       
       				count++;
       				nRows++;
       	
       			}
       
       			function removeRow(rowId) {
     				var tBody = document.getElementById('theBody');
       				
     				tBody.removeChild(document.getElementById(rowId));
       				nRows--;
       			}
       			-->
       		</script>
       	</head>
       	<body>
       		<table>
       			<tbody id="theBody">
       				<tr>
     					<td>Col 1 Row 1</td>
     					<td>Col 2 Row 1</td>
     		 	</tr>	 			
       			</tbody>
       		</table>	
       		<p><a href="javascript:addRow()">Add Row</a></p>
       	</body>
       </html>
    PHP || MySql || Apache || Get Firefox || OpenOffice.org || ClickOnline ||

    Did I ever say I was an expert?

    | PHP Session --> Database Handler * Custom Error Handler * Installing PHP * HTML Form Handler * PHP 5 OOP * Using XML * Ajax | VB6 Winsock - HTTP POST / GET * Winsock - HTTP File Upload

    Please mark threads resolved by going to the thread tools menu and clicking the Mark Thread Resolved button.

    Has a post really helped you? Please Rate it.

  6. #6
    Join Date
    Sep 2004
    Posts
    11

    Re: How to add a Row to a table dynamically

    Thank u for the answer..It is a nice approach...But I managed to do that in another way...And The method u suggested is Good...

    With Regards,
    Venu Gopal.

  7. #7
    Join Date
    Jan 2005
    Posts
    1

    Post Re: How to add a Row to a table dynamically

    Hi, I like what you have done with the JS, I am wondering if you could be nice enough/know how to to illustrate how you may do the same, but with text boxes?

    To be submitted to a db??!?!

    Spent most of today looking!

  8. #8
    Join Date
    Nov 2004
    Location
    Slough, UK
    Posts
    184

    Re: How to add a Row to a table dynamically

    Well the method is very similar. The code which I gave above had been slightley adapted from an application I wrote. To do the same with text boxes you just need to create input elements with the createElement() function.

    This is the version of code I use. You are welcome to use it and adapt it as you see fit, it has been tested in FF 1.0, IE 6 and NS 7.
    HTML Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     		"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
     <html>
     	<head>
     		<link rel="stylesheet" href="pictures.css" type="text/css" />
     	
     
     		<title>Albums - User Management</title>
     	</head>
     	<body>
     		<div class="topbar">
     			<table>
     				<tr>
     					<td>
     					    <a href="/pictures.php?action=listalbums">Albums</a> &gt;&gt;
     					    <a href="/pictures.php?action=viewalbum&amp;albumid=3">Album3</a>
     					    &gt;&gt; Add Picture
     					</td>
     								    <td><a href="/pictures.php?action=userpref">Preferences</a></td>
     								    <td class="logon">
     					    admin 
     						    (<a href="/pictures.php?logon=0">Log Off</a>)
     					</td>
     				</tr>
     			</table>
     		</div>
     	
     		<h4>Add New Picture</h4>
     		<form action="/pictures.php?action=pictureman&amp;pictureman=add&amp;albumid=3" method="post" 
     			enctype="multipart/form-data">
     	    <caption><p>Errors Occured While Processing the folowing images.</p></caption>
     		    <!-- a javascript function will go here to dynamically create more picture uploads -->
     			<script type="text/javascript">
     			<!--
     var rows = 2;
     
     function add_row() 
     {
     	var counter;
     	var ptable = document.getElementById('picturetable');
     	
     	var trow = document.createElement('tr');
     	trow.setAttribute('id', 'r' + rows);
     
     	var ptd = new Array(4);
     	
     	var arNames = Array('pathlarge[]','name[]','description[]','pathsmall[]','none');
     	var arTypes = Array('file','text','text','file','button');
     
     	for (counter = 0; counter < arTypes.length; counter++)
     	{
     		ptd[counter] = document.createElement('td');
     
     		var p = document.createElement('span')
     		var pinput = document.createElement('input');
     		
     		pinput.setAttribute('name', arNames[counter]);
     		pinput.setAttribute('type', arTypes[counter]);
     		
     		if (arTypes[counter] == 'button') 
     		{
     		pinput.setAttribute('value', 'x');
     		pinput.onclick = removeNode;
     		pinput.rId = 'r' + rows;
     		}		
     		
     		p.appendChild(pinput);
     		ptd[counter].appendChild(p);		
     		trow.appendChild(ptd[counter]);
     	}
     
     	ptable.appendChild(trow);
     	rows++;
     }
     
     function removeNode()
     {
     	var ptable = document.getElementById('picturetable');
     	
     	ptable.removeChild(document.getElementById(this.rId));
     
     	rows--;
     }
     			-->
     			</script>
     			<table>
     			<thead>
     				<tr>
     				    <th>Picture</th>
     				    <th>Name (leave blank to use file name)</th>
     				    <th>Description</th>
     				    <th>Preview Picture</th>
     				</tr>
     			</thead>
     			<tbody id="picturetable">
     						    <tr >
     				    <td><span><span class="error">This image was not a valid image file.</span><br />
     					    <input type="file" name="pathlarge[]" /></span></td>
     				    <td><span><span class="error"></span><br />
     						    <input type="text" name="name[]" 
     						    value="" />
     					    </span>
     					</td>
     				    <td><span><span class="error"></span><br />
     						    <input type="text" name="description[]" 
     						    value="" />
     					    </span>
     					</td>
     				    <td><span><span class="error"></span><br />
     					    <input type="file" name="pathsmall[]" /></span></td>
     								    </tr>
     					    </tbody>
     			</table>
     		    <p><input type="submit" value="Add Picture" name="submit" /></p>
     		    <p><a href="javascript:add_row()">Add More</a></p>
     		</form>
     	</body>
     </html>
    PHP || MySql || Apache || Get Firefox || OpenOffice.org || ClickOnline ||

    Did I ever say I was an expert?

    | PHP Session --> Database Handler * Custom Error Handler * Installing PHP * HTML Form Handler * PHP 5 OOP * Using XML * Ajax | VB6 Winsock - HTTP POST / GET * Winsock - HTTP File Upload

    Please mark threads resolved by going to the thread tools menu and clicking the Mark Thread Resolved button.

    Has a post really helped you? Please Rate it.

  9. #9
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: How to add a Row to a table dynamically

    Welcomd to the forums, Pradeep_Pol!

    Please remember to keep your posts relevant. This thread is almost 10 years old! And when you have a question to ask, please create a new thread to ask your question. Don't hijack an old thread.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center