-
December 24th, 2004, 08:16 AM
#1
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...
-
December 27th, 2004, 10:22 AM
#2
Re: How to add a Row to a table dynamically
Do you want to do this on the client side?
-
December 28th, 2004, 04:01 AM
#3
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?
-
December 28th, 2004, 04:51 AM
#4
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>
-
January 1st, 2005, 01:09 AM
#5
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.
-
January 5th, 2005, 10:42 AM
#6
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!
-
January 6th, 2005, 02:47 AM
#7
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> >>
<a href="/pictures.php?action=viewalbum&albumid=3">Album3</a>
>> 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&pictureman=add&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>
-
February 15th, 2014, 06:02 AM
#8
Re: How to add a Row to a table dynamically
Originally Posted by lee_j
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>
-
March 22nd, 2014, 02:28 PM
#9
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|