Create dynamic rows

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

    Create dynamic rows

    "kaeli" <infinite.possi bilities@NOSPAM att.net> wrote in message
    news:MPG.197482 677bbc284b98970 2@nntp.lucent.c om...[color=blue]
    > In article <bed8e3$m6r$1@m awar.singnet.co m.sg>, stayhardsg@yaho o.com.sg
    > shared the illuminating thought...[color=green]
    > > hi,
    > >
    > > Can someone point me to a website where I can find a "create dynamic[/color][/color]
    rows"[color=blue][color=green]
    > > javascript that work for IE, NS6 & NS7?
    > >
    > > Thank You.
    > >
    > > regards,
    > > Cindy
    > >[/color]
    >
    > I have one that you might be able to modify to suit you.
    > NN6+, Mozilla, and IE5+ only.
    > Note that your table MUST have a TBODY node for this to work.
    >
    > Excerpt from a really big script that has been tested in NN6, Mozilla
    > 1.2, and IE6:
    >
    > TBL = document.getEle mentById("t1");
    > TR = document.create Element("TR");
    > TD = document.create Element("TD");
    > TH = document.create Element("TH");
    > TH.appendChild( document.create TextNode("Your Name:"));
    > S = document.create Element("input" );
    > S.setAttribute( "type","tex t");
    > S.setAttribute( "name","tname") ;
    > TD.appendChild( S);
    > TR.appendChild( TH);
    > TR.appendChild( TD);
    > TBL.appendChild (TR);
    >
    >
    > The whole script is very large and makes a dynamic form for customer
    > support (intranet application), so I didn't want to post it here.
    >
    > ----------------------------------------
    > ~kaeli~
    > http://www.ipwebdesign.net/wildAtHeart
    > http://www.ipwebdesign.net/kaelisSpace
    > Kill one man and you are a murderer.
    > Kill millions and you are a conqueror.
    > Kill everyone and you are God.
    > ----------------------------------------[/color]
    hi Kaeli,

    I have downloaded a script from javascript.inte rnet.com

    <HEAD>
    <SCRIPT LANGUAGE="JavaS cript">
    <!--
    function addRow(id){
    var tbody = document.getEle mentById
    (id).getElement sByTagName("TBO DY")[0];
    var row = document.create Element("TR")
    var td1 = document.create Element("TD")
    td1.appendChild (document.creat eTextNode("colu mn 1"))
    var td2 = document.create Element("TD")
    td2.appendChild (document.creat eTextNode("colu mn 2"))
    row.appendChild (td1);
    row.appendChild (td2);
    tbody.appendChi ld(row);
    }
    -->
    </script>
    </HEAD>

    <BODY>
    <a href="javascrip t:addRow('myTab le')">Add row</a>
    <table id="myTable" cellspacing="0" border="1">
    <tbody>
    <tr>
    <td>row1_column 1</td><td>row1_col umn1</td>
    </tr>
    </tbody>
    </table>
    </BODY>
    </HTML>

    and I tried to add the following after the td2, but it didn't work.

    S = document.create Element("input" );
    S.setAttribute( "type","tex t");
    S.setAttribute( "name","tname") ;
    TD.appendChild( S);

    Can you tell me what was wrong? Thank You.

    Regards,
    Cindy


    Tags: None
    • kaeli
      #2
      Re: Create dynamic rows

      In article <beg71t$rh9$1@r eader01.singnet .com.sg>,
      stayhardsg@yaho o.com.sg shared the illuminating thought...
      <snip>[color=blue]
      >
      > and I tried to add the following after the td2, but it didn't work.
      >
      > S = document.create Element("input" );
      > S.setAttribute( "type","tex t");
      > S.setAttribute( "name","tname") ;
      > TD.appendChild( S);
      >
      > Can you tell me what was wrong? Thank You.
      >[/color]

      You can't have a form element outside a form in any browser but IE.
      And you have to be careful with where you put the form tags. So you wrap
      the table in the form tags.
      As to why it didn't work, you didn't change the variable name from TD to
      td2.

      The following worked fine in IE and Mozilla.
      <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
      <html>
      <head>
      <title> New Document </title>
      <HEAD>
      <SCRIPT LANGUAGE="JavaS cript">
      <!--
      function addRow(id){
      var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY")
      [0];
      var row = document.create Element("TR");
      var td1 = document.create Element("TD");
      td1.appendChild (document.creat eTextNode("colu mn 1"));
      var td2 = document.create Element("TD");
      td2.appendChild (document.creat eTextNode("colu mn 2"));
      S = document.create Element("input" );
      S.setAttribute( "type","tex t");
      S.setAttribute( "name","tname") ;
      td2.appendChild (S);
      row.appendChild (td1);
      row.appendChild (td2);
      tbody.appendChi ld(row);
      }
      -->
      </script>
      </HEAD>

      <BODY>
      <form name="f1" id="f1">
      <a href="javascrip t:addRow('myTab le')">Add row</a>
      <table id="myTable" cellspacing="0" border="1">
      <tbody>
      <tr>
      <td>row1_column 1</td><td>row1_col umn1</td>
      </tr>
      </tbody>
      </table>
      </form>
      </BODY>
      </HTML>

      ----------------------------------------
      ~kaeli~
      http://www.ipwebdesign.net/wildAtHeart

      http://www.ipwebdesign.net/kaelisSpace

      Jesus saves, Allah protects, and Cthulhu
      thinks you'd make a nice sandwich.
      ----------------------------------------

        Comment

        • Lasse Reichstein Nielsen
          #3
          Re: Create dynamic rows

          kaeli <infinite.possi bilities@NOSPAM att.net> writes:
          [color=blue]
          > You can't have a form element outside a form in any browser but IE.[/color]

          Sure you can, and it's also legal according to the HTML specification.
          I know that Netscape 4 don't like it, but it doesn't understand
          document.create Element either, so this code is not for NS4 anyway.

          /L
          --
          Lasse Reichstein Nielsen - lrn@hotpop.com
          Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
          'Faith without judgement merely degrades the spirit divine.'

            Comment

            • kaeli
              #4
              Re: Create dynamic rows

              In article <isqby7g6.fsf@h otpop.com>, lrn@hotpop.com shared the
              illuminating thought...[color=blue]
              > kaeli <infinite.possi bilities@NOSPAM att.net> writes:
              >[color=green]
              > > You can't have a form element outside a form in any browser but IE.[/color]
              >
              > Sure you can, and it's also legal according to the HTML specification.
              > I know that Netscape 4 don't like it, but it doesn't understand
              > document.create Element either, so this code is not for NS4 anyway.
              >[/color]

              I should have elaborated, apparently.

              It may be legal, but I prefer successful controls. I can only think of
              one or two situations in which I wouldn't need the form to submit. The
              rest of the time, I would. Consistency is just something I like a lot.
              Not to mention that not all browsers like it - I can't vouch for
              anything but NN4 hating it, but I certainly haven't checked out ALL
              browsers, including Opera(7), Mac IE, or whatever other browsers are out
              there, which do support createElement.

              Forms in HTML documents
              http://www.w3.org/TR/REC-html40/interact/forms.html


              "The elements used to create controls generally appear inside a FORM
              element, but may also appear outside of a FORM element declaration when
              they are used to build user interfaces. This is discussed in the section
              on intrinsic events. Note that controls outside a form cannot be
              successful controls."

              "A successful control is "valid" for submission. Every successful
              control has its control name paired with its current value as part of
              the submitted form data set. A successful control must be defined within
              a FORM element and must have a control name."

              ----------------------------------------
              ~kaeli~
              http://www.ipwebdesign.net/wildAtHeart

              http://www.ipwebdesign.net/kaelisSpace

              Jesus saves, Allah protects, and Cthulhu
              thinks you'd make a nice sandwich.
              ----------------------------------------

                Comment

                • Andrus Moor
                  #5
                  Re: Create dynamic rows

                  kaeli,

                  thank you. This is excellent script.
                  However, I want to add new row to table before current row, using mouse
                  right click or add command.

                  Current row is the row whose input box has focus before clicking to add
                  command.

                  Any idea how to implement this ?

                  Andrus.



                  "kaeli" <infinite.possi bilities@NOSPAM att.net> wrote in message
                  [color=blue]
                  > The following worked fine in IE and Mozilla.
                  > <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
                  > <html>
                  > <head>
                  > <title> New Document </title>
                  > <HEAD>
                  > <SCRIPT LANGUAGE="JavaS cript">
                  > <!--
                  > function addRow(id){
                  > var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY")
                  > [0];
                  > var row = document.create Element("TR");
                  > var td1 = document.create Element("TD");
                  > td1.appendChild (document.creat eTextNode("colu mn 1"));
                  > var td2 = document.create Element("TD");
                  > td2.appendChild (document.creat eTextNode("colu mn 2"));
                  > S = document.create Element("input" );
                  > S.setAttribute( "type","tex t");
                  > S.setAttribute( "name","tname") ;
                  > td2.appendChild (S);
                  > row.appendChild (td1);
                  > row.appendChild (td2);
                  > tbody.appendChi ld(row);
                  > }
                  > -->
                  > </script>
                  > </HEAD>
                  >
                  > <BODY>
                  > <form name="f1" id="f1">
                  > <a href="javascrip t:addRow('myTab le')">Add row</a>
                  > <table id="myTable" cellspacing="0" border="1">
                  > <tbody>
                  > <tr>
                  > <td>row1_column 1</td><td>row1_col umn1</td>
                  > </tr>
                  > </tbody>
                  > </table>
                  > </form>
                  > </BODY>
                  > </HTML>[/color]


                    Comment

                    • Lasse Reichstein Nielsen
                      #6
                      Re: Create dynamic rows

                      kaeli <infinite.possi bilities@NOSPAM att.net> writes:
                      [color=blue]
                      > It may be legal, but I prefer successful controls. I can only think of
                      > one or two situations in which I wouldn't need the form to submit.[/color]

                      I, on the other hand, have never done any server side coding, but have
                      often made interactive pages with "user interfaces".
                      If the form is not going to be submitted to a server, there is no need
                      for "successful " controls (I dislike that wording, it makes it sound like
                      non-successful controls are a bad thing).

                      /L
                      --
                      Lasse Reichstein Nielsen - lrn@hotpop.com
                      Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
                      'Faith without judgement merely degrades the spirit divine.'

                        Comment

                        • kaeli
                          #7
                          Re: Create dynamic rows

                          In article <3f0c75b5$1_1@n ews.estpak.ee>, nospam_eetasoft _@online.ee
                          shared the illuminating thought...[color=blue]
                          > kaeli,
                          >
                          > thank you. This is excellent script.
                          > However, I want to add new row to table before current row, using mouse
                          > right click or add command.
                          >
                          > Current row is the row whose input box has focus before clicking to add
                          > command.
                          >
                          > Any idea how to implement this ?
                          >
                          > Andrus.[/color]

                          I got this much done, but I have to do real work now. :)
                          It does as you say above, but you have to click the link. It's up to you
                          to catch a click and call it.

                          <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
                          <html>
                          <head>
                          <title> New Document </title>
                          <HEAD>
                          <SCRIPT LANGUAGE="JavaS cript">
                          <!--
                          var b4;
                          var x = 0;

                          function addRow(id){
                          var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY")
                          [0];
                          var row = document.create Element("TR");
                          row.setAttribut e("id","row_"+x );
                          var td1 = document.create Element("TD");
                          td1.appendChild (document.creat eTextNode("new row "+x));
                          var td2 = document.create Element("TD");
                          td2.appendChild (document.creat eTextNode("new row "+x));
                          S = document.create Element("input" );
                          S.setAttribute( "type","tex t");
                          S.setAttribute( "name","tname_" +x);
                          S.setAttribute( "id","tid_" +x);
                          td2.appendChild (S);
                          if (S.attachEvent)
                          {
                          S.attachEvent(' onfocus', setIt);
                          }
                          else
                          {
                          S.onchange = setIt;
                          }
                          row.appendChild (td1);
                          row.appendChild (td2);
                          b4.insertAdjace ntElement("Befo reBegin",row);
                          x++;
                          }

                          function setIt()
                          {
                          setTo = event.srcElemen t.name.substrin g(event.srcElem ent.name.indexO f
                          ("_")+1, event.srcElemen t.name.length);
                          b4 = document.getEle mentById("row_" +setTo);
                          }
                          -->
                          </script>
                          </HEAD>

                          <BODY>
                          <form name="f1" id="f1">
                          <a href="javascrip t:addRow('myTab le')">Add row</a>
                          <table id="myTable" cellspacing="0" border="1">
                          <tbody>
                          <tr id="first">
                          <td>row1_column 1</td><td>row1_col umn1</td>
                          </tr>
                          </tbody>
                          </table>
                          </form>
                          <script>
                          b4 = document.getEle mentById("first ");
                          </script>
                          </BODY>
                          </HTML>


                          ----------------------------------------
                          ~kaeli~
                          http://www.ipwebdesign.net/wildAtHeart

                          http://www.ipwebdesign.net/kaelisSpace

                          Jesus saves, Allah protects, and Cthulhu
                          thinks you'd make a nice sandwich.
                          ----------------------------------------

                            Comment

                            • kaeli
                              #8
                              Re: Create dynamic rows

                              In article <MPG.19772e9bd9 a3fc96989710@nn tp.lucent.com>,
                              infinite.possib ilities@NOSPAMa tt.net shared the illuminating thought...[color=blue][color=green]
                              > > Andrus.[/color]
                              >
                              > I got this much done, but I have to do real work now. :)
                              > It does as you say above, but you have to click the link. It's up to you
                              > to catch a click and call it.
                              >[/color]

                              Oh, and it's now IE ONLY.
                              Mozilla/Netscape don't support insertAdjacentE lement, but I couldn't get
                              insertBefore to work right with IE and Moz/NN. I am pretty sure one
                              could, but I'm getting busy at work now.
                              If you'd like to play more, check out my fav reference for this sort of
                              thing.

                              http://msdn.microsoft.com/library/default.asp?

                              url=/workshop/author/dhtml/reference/methods.asp

                              And don't forget, if this is production for a real internet site, make
                              sure you put in error checking and stuff so it doesn't crash older
                              browsers.

                              ----------------------------------------
                              ~kaeli~
                              http://www.ipwebdesign.net/wildAtHeart

                              http://www.ipwebdesign.net/kaelisSpace

                              Jesus saves, Allah protects, and Cthulhu
                              thinks you'd make a nice sandwich.
                              ----------------------------------------

                                Comment

                                Previous template Next
                                Working...