Replace Table Help

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

    Replace Table Help

    Hi All,

    I am trying to dynamically replace a table in the dom, anyone have an
    idea on how to do this.

    here is some sample suedo code of what I want to do.

    var tableHTML = "<table id=\"table1\">< tr><td>this is table 1</td></
    tr></table>";
    var tableHTML2 = "<table id=\"table2\">< tr><td>this is table 2</td></
    tr></table>";

    vat t1 = document.getEle mentById("table 1");

    if (t1)
    {
    t1 = tableHTML2;
    }

    I am sure that assignment is not right, its needs to be something like

    t1.outerXml = tableHTML2;
    or
    t1.parentNode.i nnerHTML = tableHTML2; /// this could kill anything
    else in the node though.

    Any ideas on how to do this?

    Thanks,
    -SJ
    Tags: None
    • Jeremy J Starcher
      #2
      Re: Replace Table Help

      On Tue, 29 Apr 2008 10:54:12 -0700, SirCodesALot wrote:
      Hi All,
      >
      I am trying to dynamically replace a table in the dom, anyone have an
      idea on how to do this.
      >
      here is some sample suedo code of what I want to do.
      [code snipped]

      Any ideas on how to do this?
      innerHTML has a number of known issues, including a handful dealing with
      tables. I don't remember what they are anymore, since I recommend
      avoiding innerHTML whenever possible.

      You are better off using DOM2 methods to build it.


      I've ditched this method in favor of building the table server-side, to
      keep my web-app running on non-JS enabled browsers... but here
      is a stripped down copy of what I was using.


      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta name="generator " content="HTML Tidy for Linux/x86 (vers 1
      September 2005), see www.w3.org">
      <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
      </head>

      <body onload="drawTab le();" >
      <table>
      <tbody id="partData">
      </tbody>
      </table>

      <script type="text/javascript">
      var plist = [
      {
      "idx":"538" ,
      "section":" 7",
      "line":"1",
      "zid":"1",
      "zflag":"",
      "zmfg":"TOM ",
      "zpnum":"230260 ",
      "pdesc":"Carbur etor A35 cpl."
      }
      ,
      {
      "idx":"539" ,
      "section":" 7",
      "line":"2",
      "zid":"2",
      "zflag":"M" ,
      "zmfg":"TOM ",
      "zpnum":"229827 ",
      "pdesc":"Je t 53"
      }
      ,
      {
      "idx":"540" ,
      "section":" 7",
      "line":"3",
      "zid":"2",
      "zflag":"M" ,
      "zmfg":"TOM ",
      "zpnum":"217940 ",
      "pdesc":"Je t 54"
      }
      ];



      function drawTable() {

      // This is the TABLE BODY id
      var tbodyID = 'partData';
      if (document.getEl ementById) {
      clearChildNodes (tbodyID);
      // assure bug-free redraw in Geck engine by
      // letting window show cleared table

      // Prolly not needed anymore, but I have one customer still on
      // an old version of NS. I'd rather not hear him complain.
      if (navigator.prod uct && navigator.produ ct == "Gecko") {
      setTimeout("fin ishDrawTable('" + tbodyID + "')", 0);
      } else {
      finishDrawTable (tbodyID);
      }
      } else {
      alert("Sorry, dynamic table feature works with IE5 or later for
      Windows, and Netscape 6 or later.");
      }
      }

      // Complete the reconstruction of the sorted table
      function finishDrawTable (tbodyID) {

      var tr, td, txt;
      tbody = document.getEle mentById(tbodyI D);
      // create holder for accumulated tbody elements and text nodes
      var frag = document.create DocumentFragmen t();
      // loop through data source

      for (var i = 0; i < plist.length; i++) {
      var part = plist[i];

      tr = document.create Element("tr");

      makeCell(part.z pnum, tr);
      makeCell(part.p desc, tr);

      frag.appendChil d(tr);
      }
      if (!tbody.appendC hild(frag)) {
      alert("This browser doesn't support dynamic tables.");
      }
      }


      // Remove existing content of an element
      function clearChildNodes (elemID) {
      var elem = document.getEle mentById(elemID );
      if (elem == undefined) return;
      while (elem.childNode s.length 0) {
      elem.removeChil d(elem.firstChi ld);
      }
      }

      function makeCell(c, tr)
      {
      var tr, td, txt;

      td = document.create Element("td");

      txt = document.create TextNode(c);
      td.appendChild( txt);
      tr.appendChild( td);
      return td;
      }

      </script>
      </body>
      </html>

        Comment

        • SirCodesALot
          #3
          Re: Replace Table Help

          On Apr 29, 1:42 pm, Jeremy J Starcher <r3...@yahoo.co mwrote:
          On Tue, 29 Apr 2008 10:54:12 -0700, SirCodesALot wrote:
          Hi All,
          >
          I am trying to dynamically replace a table in the dom, anyone have an
          idea on how to do this.
          >
          here is some sample suedo code of what I want to do.
          >
          [code snipped]
          >
          Any ideas on how to do this?
          >
          innerHTML has a number of known issues, including a handful dealing with
          tables.  I don't remember what they are anymore, since I recommend
          avoiding innerHTML whenever possible.
          >
          You are better off using DOM2 methods to build it.
          >
          I've ditched this method in favor of building the table server-side, to
          keep my web-app running on non-JS enabled browsers... but here
          is a stripped down copy of what I was using.
          >
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
            <meta name="generator " content="HTML Tidy for Linux/x86 (vers 1
          September 2005), seewww.w3.org">
            <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
          </head>
          >
          <body onload="drawTab le();" >
          <table>
            <tbody id="partData">
            </tbody>
          </table>
          >
          <script type="text/javascript">
          var plist = [
          {
          "idx":"538" ,
          "section":" 7",
          "line":"1",
          "zid":"1",
          "zflag":"",
          "zmfg":"TOM ",
          "zpnum":"230260 ",
          "pdesc":"Carbur etor A35 cpl."}
          >
          ,
          {
          "idx":"539" ,
          "section":" 7",
          "line":"2",
          "zid":"2",
          "zflag":"M" ,
          "zmfg":"TOM ",
          "zpnum":"229827 ",
          "pdesc":"Je t 53"}
          >
          ,
          {
          "idx":"540" ,
          "section":" 7",
          "line":"3",
          "zid":"2",
          "zflag":"M" ,
          "zmfg":"TOM ",
          "zpnum":"217940 ",
          "pdesc":"Je t 54"}
          >
          ];
          >
          function drawTable() {
          >
            // This is the TABLE BODY id  
            var tbodyID = 'partData';
            if (document.getEl ementById) {
                  clearChildNodes (tbodyID);
              // assure bug-free redraw in Geck engine by
              // letting window show cleared table      
          >
              // Prolly not needed anymore, but I have one customer still on
              // an old version of NS.  I'd rather not hear him complain.
              if (navigator.prod uct && navigator.produ ct == "Gecko") {
                setTimeout("fin ishDrawTable('" + tbodyID + "')", 0);
              } else {
                finishDrawTable (tbodyID);
              }
            } else {
              alert("Sorry, dynamic table feature works with IE5 or later for
          Windows, and Netscape 6 or later.");
            }
          >
          }
          >
          // Complete the reconstruction of the sorted table
          function finishDrawTable (tbodyID) {
          >
            var tr, td, txt;
            tbody = document.getEle mentById(tbodyI D);
            // create holder for accumulated tbody elements and text nodes
            var frag = document.create DocumentFragmen t();
            // loop through data source
          >
            for (var i = 0; i < plist.length; i++) {
              var part = plist[i];
          >
              tr = document.create Element("tr");
          >
              makeCell(part.z pnum, tr);
              makeCell(part.p desc, tr);
          >
              frag.appendChil d(tr);
            }
            if (!tbody.appendC hild(frag)) {
              alert("This browser doesn't support dynamic tables.");
            }
          >
          }
          >
          // Remove existing content of an element
          function clearChildNodes (elemID) {
            var elem = document.getEle mentById(elemID );
            if (elem == undefined) return;
            while (elem.childNode s.length 0) {
              elem.removeChil d(elem.firstChi ld);
            }
          >
          }
          >
          function makeCell(c, tr)
          {
            var tr, td, txt;
          >
            td = document.create Element("td");
          >
            txt = document.create TextNode(c);
            td.appendChild( txt);
            tr.appendChild( td);
             return td;
          >
          }
          >
          </script>
          </body>
          </html>
          Thanks for the reply. I found a way but, it looses the sortedness.

          var curTable = document.getEle mentById(curDiv Id);
          if(curTable)
          {
          var curParent = curTable.parent Node;
          // remove the old table
          curParent.remov eChild(curTable );
          // add the new plus the rest of the content form the parent.
          curParent.inner HTML = newHtml + curParent.inner HTML;
          }

          thanks again.

            Comment

            • Tom Cole
              #4
              Re: Replace Table Help

              On Apr 29, 3:10 pm, SirCodesALot <sjour...@gmail .comwrote:
              On Apr 29, 1:42 pm, Jeremy J Starcher <r3...@yahoo.co mwrote:
              >
              >
              >
              >
              >
              On Tue, 29 Apr 2008 10:54:12 -0700, SirCodesALot wrote:
              Hi All,
              >
              I am trying to dynamically replace a table in the dom, anyone have an
              idea on how to do this.
              >
              here is some sample suedo code of what I want to do.
              >
              [code snipped]
              >
              Any ideas on how to do this?
              >
              innerHTML has a number of known issues, including a handful dealing with
              tables.  I don't remember what they are anymore, since I recommend
              avoiding innerHTML whenever possible.
              >
              You are better off using DOM2 methods to build it.
              >
              I've ditched this method in favor of building the table server-side, to
              keep my web-app running on non-JS enabled browsers... but here
              is a stripped down copy of what I was using.
              >
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">
              <html>
              <head>
                <meta name="generator " content="HTML Tidy for Linux/x86 (vers 1
              September 2005), seewww.w3.org">
                <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
              </head>
              >
              <body onload="drawTab le();" >
              <table>
                <tbody id="partData">
                </tbody>
              </table>
              >
              <script type="text/javascript">
              var plist = [
              {
              "idx":"538" ,
              "section":" 7",
              "line":"1",
              "zid":"1",
              "zflag":"",
              "zmfg":"TOM ",
              "zpnum":"230260 ",
              "pdesc":"Carbur etor A35 cpl."}
              >
              ,
              {
              "idx":"539" ,
              "section":" 7",
              "line":"2",
              "zid":"2",
              "zflag":"M" ,
              "zmfg":"TOM ",
              "zpnum":"229827 ",
              "pdesc":"Je t 53"}
              >
              ,
              {
              "idx":"540" ,
              "section":" 7",
              "line":"3",
              "zid":"2",
              "zflag":"M" ,
              "zmfg":"TOM ",
              "zpnum":"217940 ",
              "pdesc":"Je t 54"}
              >
              ];
              >
              function drawTable() {
              >
                // This is the TABLE BODY id  
                var tbodyID = 'partData';
                if (document.getEl ementById) {
                      clearChildNodes (tbodyID);
                  // assure bug-free redraw in Geck engine by
                  // letting window show cleared table      
              >
                  // Prolly not needed anymore, but I have one customer still on
                  // an old version of NS.  I'd rather not hear him complain.
                  if (navigator.prod uct && navigator.produ ct == "Gecko") {
                    setTimeout("fin ishDrawTable('" + tbodyID + "')", 0);
                  } else {
                    finishDrawTable (tbodyID);
                  }
                } else {
                  alert("Sorry, dynamic table feature works with IE5 or later for
              Windows, and Netscape 6 or later.");
                }
              >
              }
              >
              // Complete the reconstruction of the sorted table
              function finishDrawTable (tbodyID) {
              >
                var tr, td, txt;
                tbody = document.getEle mentById(tbodyI D);
                // create holder for accumulated tbody elements and text nodes
                var frag = document.create DocumentFragmen t();
                // loop through data source
              >
                for (var i = 0; i < plist.length; i++) {
                  var part = plist[i];
              >
                  tr = document.create Element("tr");
              >
                  makeCell(part.z pnum, tr);
                  makeCell(part.p desc, tr);
              >
                  frag.appendChil d(tr);
                }
                if (!tbody.appendC hild(frag)) {
                  alert("This browser doesn't support dynamic tables.");
                }
              >
              }
              >
              // Remove existing content of an element
              function clearChildNodes (elemID) {
                var elem = document.getEle mentById(elemID );
                if (elem == undefined) return;
                while (elem.childNode s.length 0) {
                  elem.removeChil d(elem.firstChi ld);
                }
              >
              }
              >
              function makeCell(c, tr)
              {
                var tr, td, txt;
              >
                td = document.create Element("td");
              >
                txt = document.create TextNode(c);
                td.appendChild( txt);
                tr.appendChild( td);
                 return td;
              >
              }
              >
              </script>
              </body>
              </html>
              >
              Thanks for the reply. I found a way but, it looses the sortedness.
              >
              var curTable = document.getEle mentById(curDiv Id);
                if(curTable)
                {
                   var curParent = curTable.parent Node;
                   // remove the old table
                   curParent.remov eChild(curTable );
                   // add the new plus the rest of the content form the parent.
                   curParent.inner HTML = newHtml + curParent.inner HTML;
                 }
              >
              thanks again.- Hide quoted text -
              >
              - Show quoted text -
              Is your table data coming from a server script? Just curious...

              Not sure if this is the ideal way, but rather than using innerHTML, I
              tend to use insertRow and deleteRow to add and remove rows from a
              table, rather than replacing the entire table. For example:

              /**
              * Remove all rows from the given table.
              * If removeHeader == false, leave the first row as a header row...
              */
              function resetTable(tabl e, removeHeader) {
              var end = (removeHeader) ? 0 : 1;
              while (table.rows.len gth end) {
              table.deleteRow (table.rows.len gth - 1); //remove last row...
              }
              }

              /**
              * Adds a row to the end of the given table and populates the cell(s)
              with the value(s)
              * in the data array.
              */
              function addRow(table, data) {
              var row = table.insertRow (table.rows.len gth);
              for (var i = 0; i < data.length; i++) {
              var cell = row.insertCell( i);
              cell.appendChil d(document.crea teTextNode(data[i]));
              }
              }

              When you want to edit your table you can call resetTable, and then
              addRow for each row you need to create.

              HTH...

                Comment

                • Jeremy J Starcher
                  #5
                  Re: Replace Table Help

                  On Tue, 29 Apr 2008 15:07:51 -0700, Tom Cole wrote:
                  On Apr 29, 3:10 pm, SirCodesALot <sjour...@gmail .comwrote:
                  >On Apr 29, 1:42 pm, Jeremy J Starcher <r3...@yahoo.co mwrote:
                  >>
                  >>
                  >>
                  >>
                  >>
                  On Tue, 29 Apr 2008 10:54:12 -0700, SirCodesALot wrote:
                  Hi All,
                  >>
                  I am trying to dynamically replace a table in the dom, anyone have
                  an idea on how to do this.
                  >>
                  here is some sample suedo code of what I want to do.
                  >>
                  [code snipped]
                  >>
                  Any ideas on how to do this?
                  >>
                  innerHTML has a number of known issues, including a handful dealing
                  with tables.  I don't remember what they are anymore, since I
                  recommend avoiding innerHTML whenever possible.
                  >>
                  You are better off using DOM2 methods to build it.
                  >>
                  I've ditched this method in favor of building the table server-side,
                  to keep my web-app running on non-JS enabled browsers... but here is
                  a stripped down copy of what I was using.
                  [My code snipped]
                  >Thanks for the reply. I found a way but, it looses the sortedness.
                  >>
                  [ Snipped ]
                  >thanks again.- Hide quoted text -
                  >>
                  >- Show quoted text -
                  >
                  Is your table data coming from a server script? Just curious...
                  >
                  Not sure if this is the ideal way, but rather than using innerHTML, I
                  tend to use insertRow and deleteRow to add and remove rows from a table,
                  rather than replacing the entire table. For example:
                  >
                  /**
                  * Remove all rows from the given table. * If removeHeader == false,
                  leave the first row as a header row... */
                  function resetTable(tabl e, removeHeader) {
                  var end = (removeHeader) ? 0 : 1;
                  while (table.rows.len gth end) {
                  table.deleteRow (table.rows.len gth - 1); //remove last row...
                  }
                  }
                  I like that. A little easier to use than some of what I was doing.
                  >
                  /**
                  * Adds a row to the end of the given table and populates the cell(s)
                  with the value(s)
                  * in the data array.
                  */
                  function addRow(table, data) {
                  var row = table.insertRow (table.rows.len gth); for (var i = 0; i <
                  data.length; i++) {
                  var cell = row.insertCell( i);
                  cell.appendChil d(document.crea teTextNode(data[i]));
                  }
                  }
                  For a static table, this works. In my case I had a number of event
                  handlers set up on the table that I stripped out of my example code.
                  >
                  When you want to edit your table you can call resetTable, and then
                  addRow for each row you need to create.
                  Always nice to see another approach to the same problem. Gets out out of
                  our box.

                    Comment

                    Previous template Next
                    Working...