add & remove rows from table

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Mike Solomon
    #1

    add & remove rows from table

    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="JavaS cript">
    __uid = 0;

    doc = document;

    function addRowTo(id) {
    var tbl = doc.getElementB yId(id);
    //create a new row
    var newrow = doc.createEleme nt("TR");
    var newcol , newinput;
    newcol = doc.createEleme nt("TD");
    newcol.width = 200;
    newinput = doc.createEleme nt("input");
    newinput.name = "date";
    newinput.size = 20;
    newinput.value = doc.main.date.v alue
    newcol.appendCh ild(newinput);
    newrow.appendCh ild(newcol);

    newcol = doc.createEleme nt("TD");
    newcol.width = 200;
    newinput = doc.createEleme nt("input");
    newinput.name = "start"+__u id;
    newinput.size = 20;
    newinput.value = doc.main.start. value
    newcol.appendCh ild(newinput);
    newrow.appendCh ild(newcol);

    newcol = doc.createEleme nt("TD");
    newcol.width = 200;
    newinput = doc.createEleme nt("input");
    newinput.name = "end"+__uid ;
    newinput.size = 20;
    newinput.value = doc.main.end.va lue
    newcol.appendCh ild(newinput);
    newrow.appendCh ild(newcol);


    tbl.appendChild (newrow);
    __uid++;


    document.main.d ate.value = '';
    document.main.s tart.value = '';
    document.main.e nd.value = '';

    document.main.d ate.focus();
    }

    </script>
    </HEAD>
    <body>
    <form name="main" method='post'>
    <table id="tbl1">
    <tbody id="tbl1body">
    <td>DATE<td>STA RT<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="addRow To('tbl1body')" >
    <img border=0 src="/images/add.gif"></a>
    </table>
    </form></html>
    Tags: None
    • YD
      #2
      Re: add &amp; remove rows from table

      Mike Solomon wrote:[color=blue]
      > 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[/color]

      I add changes in your code:
      [color=blue]
      > [...]
      > <HTML><HEAD>
      > <TITLE>test</TITLE>
      > <script LANGUAGE="JavaS cript">
      > __uid = 0;
      >
      > doc = document;[/color]


      function delElem(elemToD el){
      if(!elemToDel)r eturn;
      elemToDel.paren tNode.removeChi ld(elemToDel);
      }
      [color=blue]
      > function addRowTo(id) {
      > var tbl = doc.getElementB yId(id);
      > //create a new row
      > var newrow = doc.createEleme nt("TR");
      > var newcol , newinput;
      > newcol = doc.createEleme nt("TD");
      > newcol.width = 200;
      > newinput = doc.createEleme nt("input");
      > newinput.name = "date";
      > newinput.size = 20;
      > newinput.value = doc.main.date.v alue
      > newcol.appendCh ild(newinput);
      > newrow.appendCh ild(newcol);
      >
      > newcol = doc.createEleme nt("TD");
      > newcol.width = 200;
      > newinput = doc.createEleme nt("input");
      > newinput.name = "start"+__u id;
      > newinput.size = 20;
      > newinput.value = doc.main.start. value
      > newcol.appendCh ild(newinput);
      > newrow.appendCh ild(newcol);
      >
      > newcol = doc.createEleme nt("TD");
      > newcol.width = 200;
      > newinput = doc.createEleme nt("input");
      > newinput.name = "end"+__uid ;
      > newinput.size = 20;
      > newinput.value = doc.main.end.va lue
      > newcol.appendCh ild(newinput);
      > newrow.appendCh ild(newcol);[/color]

      newcol = doc.createEleme nt("TD");
      newcol.width = 200;
      newinput = doc.createEleme nt("input");
      newinput.setAtt ribute("type"," button");
      newinput.name = "destroy"+__uid ;
      newinput.value= "Clear";
      newinput.onclic k=new Function ("delRow(docume nt.getElementBy Id('row"+__uid+ "'));");
      newcol.appendCh ild(newinput);
      newrow.appendCh ild(newcol);

      [color=blue]
      > tbl.appendChild (newrow);
      > __uid++;
      >
      > etc.[/color]

      HTH

      --
      Y.D.


        Comment

        • Mike Solomon
          #3
          Re: add &amp; remove rows from table

          "YD" <yd-news@free.fr> wrote in message news:<3f2709bf$ 0$24601$626a54c e@news.free.fr> ...[color=blue]
          > Mike Solomon wrote:[color=green]
          > > 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[/color]
          >
          > I add changes in your code:[/color]

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

          see below

          snip ...
          [color=blue]
          >
          > function delElem(elemToD el){
          > if(!elemToDel)r eturn;
          > elemToDel.paren tNode.removeChi ld(elemToDel);
          > }
          >[color=green]
          > > function addRowTo(id) {
          > > var tbl = doc.getElementB yId(id);
          > > //create a new row
          > > var newrow = doc.createEleme nt("TR");[/color][/color]
          newrow.id = "row"+__uid ;
          [color=blue][color=green]
          > > var newcol , newinput;
          > > newcol = doc.createEleme nt("TD");
          > > newcol.width = 200;
          > > newinput = doc.createEleme nt("input");
          > > newinput.name = "date";
          > > newinput.size = 20;
          > > newinput.value = doc.main.date.v alue
          > > newcol.appendCh ild(newinput);
          > > newrow.appendCh ild(newcol);
          > >
          > > newcol = doc.createEleme nt("TD");
          > > newcol.width = 200;
          > > newinput = doc.createEleme nt("input");
          > > newinput.name = "start"+__u id;
          > > newinput.size = 20;
          > > newinput.value = doc.main.start. value
          > > newcol.appendCh ild(newinput);
          > > newrow.appendCh ild(newcol);
          > >
          > > newcol = doc.createEleme nt("TD");
          > > newcol.width = 200;
          > > newinput = doc.createEleme nt("input");
          > > newinput.name = "end"+__uid ;
          > > newinput.size = 20;
          > > newinput.value = doc.main.end.va lue
          > > newcol.appendCh ild(newinput);
          > > newrow.appendCh ild(newcol);[/color]
          >
          > newcol = doc.createEleme nt("TD");
          > newcol.width = 200;
          > newinput = doc.createEleme nt("input");
          > newinput.setAtt ribute("type"," button");
          > newinput.name = "destroy"+__uid ;
          > newinput.value= "Clear";
          > newinput.onclic k=new Function ("delRow(docume nt.getElementBy Id('row"+__uid+ "'));");[/color]


          newinput.onclic k=new Function
          ("delElem(docum ent.getElementB yId('row"+__uid +"') , __uid);");
          [color=blue]
          > newcol.appendCh ild(newinput);
          > newrow.appendCh ild(newcol);
          >
          >[color=green]
          > > tbl.appendChild (newrow);
          > > __uid++;
          > >
          > > etc.[/color]
          >
          > HTH[/color]

            Comment

            Previous template Next
            Working...