add & remove rows from table

Discussion in 'Javascript' started by Mike Solomon, Jul 29, 2003.

  1. Mike Solomon

    Mike Solomon Guest

    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>
    Mike Solomon, Jul 29, 2003
    #1
    1. Advertising

  2. Mike Solomon

    YD Guest

    Mike Solomon wrote:
    > 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 add changes in your code:

    > [...]
    > <HTML><HEAD>
    > <TITLE>test</TITLE>
    > <script LANGUAGE="JavaScript">
    > __uid = 0;
    >
    > doc = document;



    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);


    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.


    HTH

    --
    Y.D.
    YD, Jul 30, 2003
    #2
    1. Advertising

  3. Mike Solomon

    Mike Solomon Guest

    "YD" <> wrote in message news:<3f2709bf$0$24601$>...
    > Mike Solomon wrote:
    > > 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 add changes in your code:


    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);
    > }
    >
    > > function addRowTo(id) {
    > > var tbl = doc.getElementById(id);
    > > //create a new row
    > > var newrow = doc.createElement("TR");

    newrow.id = "row"+__uid;

    > > 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);

    >
    > 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+"'));");



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

    > newcol.appendChild(newinput);
    > newrow.appendChild(newcol);
    >
    >
    > > tbl.appendChild(newrow);
    > > __uid++;
    > >
    > > etc.

    >
    > HTH
    Mike Solomon, Jul 30, 2003
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Richard Fagen

    Web Matrix problem, can't add table rows

    Richard Fagen, Aug 28, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    476
    Richard Fagen
    Aug 28, 2003
  2. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,226
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  3. Arjen Hoekstra
    Replies:
    0
    Views:
    551
    Arjen Hoekstra
    Aug 2, 2005
  4. Rio
    Replies:
    4
    Views:
    1,185
  5. Dev

    GridView - Problem with Table.Rows.Remove( )

    Dev, May 2, 2007, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    871
Loading...

Share This Page