add & remove rows from table

M

Mike Solomon

I have written a script that adds a row to a table and moves the
values from the initial line into the new line

What I am now trying to do is add a button in each new row that will
allow me to delete the row created

I am having no luck doing this

if i add a button using createelement and assosiate code with it the
code executes when i create the row

any help would be much appreciated

script as follows:

<HTML><HEAD>
<TITLE>test</TITLE>
<script LANGUAGE="JavaScript">
__uid = 0;

doc = document;

function addRowTo(id) {
var tbl = doc.getElementById(id);
//create a new row
var newrow = doc.createElement("TR");
var newcol , newinput;
newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.name = "date";
newinput.size = 20;
newinput.value = doc.main.date.value
newcol.appendChild(newinput);
newrow.appendChild(newcol);

newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.name = "start"+__uid;
newinput.size = 20;
newinput.value = doc.main.start.value
newcol.appendChild(newinput);
newrow.appendChild(newcol);

newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.name = "end"+__uid;
newinput.size = 20;
newinput.value = doc.main.end.value
newcol.appendChild(newinput);
newrow.appendChild(newcol);


tbl.appendChild(newrow);
__uid++;


document.main.date.value = '';
document.main.start.value = '';
document.main.end.value = '';

document.main.date.focus();
}

</script>
</HEAD>
<body>
<form name="main" method='post'>
<table id="tbl1">
<tbody id="tbl1body">
<td>DATE<td>START<td>END
<tr>
<td><input type='text' name='date' size=10 maxlength=200 value=""/>
<td><input type='text' name='start' size=10 maxlength=200 value=""/>
<td><input type='text' name='end' size=10 maxlength=200 value=""/>
<td>
<a href="#" onClick="addRowTo('tbl1body')">
<img border=0 src="/images/add.gif"></a>
</table>
</form></html>
 
Y

YD

Mike said:
I have written a script that adds a row to a table and moves the
values from the initial line into the new line

What I am now trying to do is add a button in each new row that will
allow me to delete the row created
Click to expand...

I add changes in your code:
[...]
<HTML><HEAD>
<TITLE>test</TITLE>
<script LANGUAGE="JavaScript">
__uid = 0;

doc = document;
Click to expand...


function delElem(elemToDel){
if(!elemToDel)return;
elemToDel.parentNode.removeChild(elemToDel);
}
function addRowTo(id) {
var tbl = doc.getElementById(id);
//create a new row
var newrow = doc.createElement("TR");
var newcol , newinput;
newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.name = "date";
newinput.size = 20;
newinput.value = doc.main.date.value
newcol.appendChild(newinput);
newrow.appendChild(newcol);

newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.name = "start"+__uid;
newinput.size = 20;
newinput.value = doc.main.start.value
newcol.appendChild(newinput);
newrow.appendChild(newcol);

newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.name = "end"+__uid;
newinput.size = 20;
newinput.value = doc.main.end.value
newcol.appendChild(newinput);
newrow.appendChild(newcol);
Click to expand...

newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.setAttribute("type","button");
newinput.name = "destroy"+__uid;
newinput.value="Clear";
newinput.onclick=new Function ("delRow(document.getElementById('row"+__uid+"'));");
newcol.appendChild(newinput);
newrow.appendChild(newcol);

tbl.appendChild(newrow);
__uid++;

etc.
Click to expand...

HTH
 
M

Mike Solomon

YD said:
I add changes in your code:
Click to expand...

thanks for this - i made a 2 changes to make it work for me

see below

snip ...
function delElem(elemToDel){
if(!elemToDel)return;
elemToDel.parentNode.removeChild(elemToDel);
}
Click to expand...
newrow.id = "row"+__uid;
newcol = doc.createElement("TD");
newcol.width = 200;
newinput = doc.createElement("input");
newinput.setAttribute("type","button");
newinput.name = "destroy"+__uid;
newinput.value="Clear";
newinput.onclick=new Function ("delRow(document.getElementById('row"+__uid+"'));");
Click to expand...


newinput.onclick=new Function
("delElem(document.getElementById('row"+__uid+"') , __uid);");
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Filter table rows based on multiple checkboxes value 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to add dropdown selected data to table using jquery 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Only one table shows up with the information 2
dynamic button onclick event not working 4
Remove Start Button from Clock 2
Concatenating dynamically created text box values 1

Members online

Total: 136 (members: 1, guests: 135)
Robots: 59

Forum statistics

Threads
474,077
Messages
2,570,569
Members
47,205
Latest member
KelleM857

Latest Threads

Top