Cloning / creating new row to my 3 column table(noob btw!)

micky125 · #1 September 5th, 2008, 01:36 AM

Hi guys this is my first post an ive only started to use HTML, PHP and mySQL so here goes.

The problem I am having is that i want a single line table to duplicate more lines of code when an onClick button is pressed. it basically goes

Staff name Wage hours worked
I:::::::I I:::::::::::::I I:::::::::::::::::I IButtonI

When the button is pressed i want the form table to change to
Staff name Wage hours worked
I:::::::I I:::::::::::::I I:::::::::::::::::I
I:::::::I I:::::::::::::I I:::::::::::::::::I IButtonI

and so on. I am storing staff name etc as an array so i can easily calculate totals. Is there a way to do this dynamically without having to show / hide or else using DOM?

Any help appreciated!

eWish · #2 September 5th, 2008, 03:24 AM

This will require the use of JavaScript or DHTML. Moving to JavaScript/DHTML/Ajax Forum.

--Kevin

RamananKalirajan · #3 September 5th, 2008, 06:00 AM

Hi hope this code will hep u out

[HTML]<html>
<head>
<script type="text/javascript">
function doThis()
{
var myTab = document.getElementById('myTable');
var row=myTab.rows.length;
var y=myTab.insertRow(row);

var a=y.insertCell(0);
var xx= document.createElement('input');
xx.type="text";
a.appendChild(xx);

var b=y.insertCell(1);
var xx= document.createElement('input');
xx.type="text";
b.appendChild(xx);

var c=y.insertCell(2);
var xx= document.createElement('input');
xx.type="text";
c.appendChild(xx);

}
</script>

</head>
<body>
<br/>
<input type="button" value="Add" onclick="doThis()">
<br/>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Name</th>
<th>Wage</th>
<th>Hours Worked</th>
</tr>
</table>
</body>
</html>[/HTML]

Regards
Ramanan Kalirajan

Ferris · #4 September 5th, 2008, 08:51 AM

there's an example in W3 schools.
http://www.w3schools.com/js/tryit.as...able_insertrow

Regards.

micky125 · #5 September 5th, 2008, 11:40 AM

Hey guys u wudnt believe how long ive searched the internet to find a solution to this... id say it approaching around 12hrs over a week ...

Your help is much appreciated and that coding works perfectly exactly wat i was looking for ... cheers.

I think im gona have to help a few ppl on this wen i finish my coursework to balance it out a bit :)

RamananKalirajan · #6 September 5th, 2008, 01:18 PM

Quote:

Originally Posted by micky125

Hey guys u wudnt believe how long ive searched the internet to find a solution to this... id say it approaching around 12hrs over a week ...

Your help is much appreciated and that coding works perfectly exactly wat i was looking for ... cheers.

I think im gona have to help a few ppl on this wen i finish my coursework to balance it out a bit :)

I am realy happy that you got the required thing. There is some difference between mine and the other expert who posted another link. Mine is Dom, the expert what he had given is using innerHTML. Understanding innerHTML is very easy. In future any doubts post it in the forum. I will be there trying to help u out.

Regards
Ramanan Kalirajan

What is Bytes?

Popular Articles