add & remove rows from table

Giganews Newsgroups
Subject: add & remove rows from table
Posted by:  mike_solom…@lineone.net (Mike Solomon)
Date: 29 Jul 2003

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>

Replies