Can you make them table insertRow and insertBefore (element) worktogether?

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

    Can you make them table insertRow and insertBefore (element) worktogether?


    Here's the thing, I have this HTML Table, that has multile rows
    already, each has an ID, one of them at the bottom section has id of
    "SaveData", new TRs are dynamically created upon user interaction, for
    instance,
    var tbl = document.getEle mentById ('mytable');
    // pick a TR position to insert a new row
    var trPos = 6
    newTR = tbl.insertRow(t rPos);

    // then increment the trPos var
    // other business rules and functions...

    it works all right for a few TR insertions, and then, it begins to
    insert a new TR after "SaveData",
    that's bad. So, the question is, is there any way to use
    tbl.insertRow(t rPos) in conjunction with
    insertBefore(do cument.getEleme ntById('SaveDat a'))
    that would ensure every newly inserted TR would be inserted before
    "SaveData" TR?

    I've looked at insertAdjacentE lement method, but that does not seem to
    solve the problem.

    Sorry I have to ask the question before I got a good js book. Thanks.




    Tags: None
    • SAM
      #2
      Re: Can you make them table insertRow and insertBefore (element)work together?

      DL a écrit :
      Here's the thing, I have this HTML Table, that has multile rows
      already, each has an ID, one of them at the bottom section has id of
      "SaveData", new TRs are dynamically created upon user interaction, for
      instance,
      var tbl = document.getEle mentById ('mytable');
      // pick a TR position to insert a new row
      var trPos = 6
      newTR = tbl.insertRow(t rPos);
      >
      // then increment the trPos var
      // other business rules and functions...
      >
      it works all right for a few TR insertions, and then, it begins to
      insert a new TR after "SaveData",
      with which browser ?

      a "few" ... how much ?
      because I can't reproduce it ...
      that's bad. So, the question is, is there any way to use
      tbl.insertRow(t rPos)
      that would ensure every newly inserted TR would be inserted before
      "SaveData" TR?
      each of these 3 functions bellow add a row before the savedatas
      (with my Firefox - not tested IE)

      <html>
      <script type="text/javascript">

      function addRow() {
      var tbl = document.getEle mentById ('mytable');
      var newTR = tbl.insertRow(t bl.rows.length-1);
      var newTD = document.create Element('TD');
      newTD.innerHTML = 'test';
      newTR.appendChi ld(newTD);
      }

      function addRow2() {
      var tbl = document.getEle mentById ('mytable');
      tbl = tbl.getElements ByTagName('TBOD Y')[0];
      var newTR = tbl.insertRow(t bl.rows.length) ;
      var newTD = document.create Element('TD');
      newTD.innerHTML = 'test';
      newTR.appendChi ld(newTD);
      }

      function addRow3() {
      var tbl = document.getEle mentById ('mytable');
      tbl = tbl.getElements ByTagName('TBOD Y')[0];
      var newTR = tbl.appendChild (document.creat eElement('TR')) ;
      var newTD = document.create Element('TD');
      newTD.innerHTML = 'test';
      newTR.appendChi ld(newTD);
      }
      </script>

      <table id="mytable" border=1>
      <thead>
      <tr><th>...</th></tr>
      </thead>
      <tbody>
      <tr><td>...</td></tr>
      </tbody>
      <tfoot>
      <tr id="SaveData">< td>datas</td></tr>
      </tfoot>
      </table>
      <p><a href="javascrip t:addRow();">ad d 1</a>
      <p><a href="javascrip t:addRow2();">a dd 2</a>
      <p><a href="javascrip t:addRow3();">a dd 3</a>
      </html>

        Comment

        • SAM
          #3
          Re: Can you make them table insertRow and insertBefore (element)work together?

          SAM a écrit :
          >
          each of these 3 functions bellow add a row before the savedatas
          (with my Firefox - not tested IE)
          and this forth one works fine too :

          <html>
          <script type="text/javascript">

          function addRow4() {
          var tbl = document.getEle mentById ('SaveData');
          var newTR = document.create Element('TR');
          var newTD = document.create Element('TD');
          newTD.innerHTML = 'test';
          newTR.appendChi ld(newTD);
          tbl.parentNode. insertBefore(ne wTR, tbl);
          }
          </script>
          <table id="mytable" border=1>
          <thead>
          <tr><th>...</th></tr>
          </thead>
          <tbody>
          <tr><td>...</td></tr>
          </tbody>
          <tfoot>
          <tr id="SaveData">< td>datas</td></tr>
          </tfoot>
          </table>
          <p><a href="javascrip t:addRow4();">a dd 4</a>
          </html>

          --
          sm

            Comment

            • DL
              #4
              Re: Can you make them table insertRow and insertBefore (element) worktogether?

              On May 30, 10:56 pm, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
              wrote:
              SAM a écrit :
              ...
              >sm
              Thanks, I'm testing with IE7, your syntax of tbl.rows.length gave me
              an idea,
              I've now solved this particular problem with a different approach than
              yours.

                Comment

                Previous template Next
                Working...