Remove a table row

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

    Remove a table row

    I need some help modifying this code. The code was orginally setup to
    add/remove a single table row. I modified it to add 2 (two) rows with
    one column that spans both rows. That part works. I just need help
    with the removerow function. Thanks for any help you can offer me.
    Here is the code:

    <html>
    <head>
    <title>New Document</title>
    <script type="text/javascript">
    // The counter just keeps track of which row we've added so we can
    // distinguish them. It is only used for generating text, none of
    // the functions depend on this number for node manipulation.
    var counter = 1;
    var plain = true;

    function addrow()
    {
    // Obtain a reference to the tbody node.
    var tbody = document.getEle mentById("main" ).getElementsBy TagName("tbody" ).item(0);

    if(plain)
    {
    plain=false;
    }
    else
    {
    plain=true;
    }
    for(x=1;x<3;x++ )
    {

    // Generate a new row.
    var tr = document.create Element("tr");


    if(plain)tr.bgC olor = "#CCCCCC";
    // Append the two cells to the element.
    if(x==1)
    {
    td = document.create Element("td");
    td.rowSpan = "2";
    td.innerHTML = '<input type="button" value="Delete"
    onclick="delete row(this)" />';
    tr.appendChild( td);
    }
    for(i=1;i<4;i++ )
    {
    var td = document.create Element("td");
    td.innerHTML = '<div align="right">< a onClick="remove row(this)"><img
    src="images/delete2.jpg" width="16" height="16"></A></div>';
    tr.appendChild( td);
    }

    // Now append the new row to the tbody.
    tbody.appendChi ld(tr);
    }
    }

    function deleterow(node)
    {
    // Obtain a reference to the containing tr. Use a while loop
    // so the function can be called by passing any node contained by
    // the tr node.
    var tr = node.parentNode ;
    while (tr.tagName.toL owerCase() != "tr")
    tr = tr.parentNode;

    // Remove the tr node and all children.
    tr.parentNode.r emoveChild(tr);
    }
    </script>
    </head>
    <body>
    <table id="main" border="2">
    <tr>
    <td>Dynamic Table Demo</td>
    <td><input type="button" onclick="addrow ()" value="Add Row"/></td>
    </tr>
    </table>
    </body>
    </html>
    Tags: None
    • Yann-Erwan Perio
      #2
      Re: Remove a table row

      Steve S wrote:
      [color=blue]
      > I modified it to add 2 (two) rows with
      > one column that spans both rows. That part works. I just need help
      > with the removerow function.[/color]
      [color=blue]
      > if(plain)
      > {
      > plain=false;
      > }
      > else
      > {
      > plain=true;
      > }[/color]

      What about
      plain=!plain;
      [color=blue]
      > td.innerHTML = '<div align="right">< a onClick="remove row(this)"><img[/color]

      removerow is undefined, while deleterow happily exists:-)

      If you insert two rows then you must remove two as well, the problem is
      to determine which rows to remove. There are many ways to find this, you
      could (1) simply tell which rows to remove when calling the function or
      (2) guess which one to remove, for instance checking the rowspan
      property and making appropriate decision on whether to remove the next
      sibling or the previous sibling as well.

      However, I don't really understand the logic of your buttons/links
      (deleterow/removerow may really be different functions); hopefully the
      techniques below will nevertheless help you into building an approriate
      script.


      <script type="text/javascript">
      var addRowTo = (function() {

      var getBgColor=(fun ction(){
      var k=0, bg1="#ccc", bg2="transparen t";
      return (function() {
      return k==0 ?
      (k=1, bg1) :
      (k=0, bg2);
      });
      })();

      return (function (tableId){
      var d, tbody, tr, td, bgc, ii, j;

      d=document;
      bgc=getBgColor( );
      tbody=d.getElem entById(tableId ).
      getElementsByTa gName("tbody").
      item(0);

      for(ii=0; ii<2; ii++) {
      tr=d.createElem ent("tr");
      tr.style.backgr oundColor=bgc;

      if(ii==0) {
      td=d.createElem ent("td");
      td.rowSpan="2";
      td.innerHTML="< input type='button'"+
      " value='Delete'" +
      " onclick='remove Row(this)'>";
      tr.appendChild( td);
      }

      for(j=0; j<3; j++) {
      td=d.createElem ent("td");
      td.innerHTML="< a onClick='remove Row(this)'>x<\/a>";
      tr.appendChild( td);
      }

      tbody.appendChi ld(tr);
      }
      });
      })();

      function removeRow(el){
      var cel;

      while(el && el.nodeName.toL owerCase()!="tr ")
      el=el.parentNod e;

      if(el && el.parentNode){
      cel=el.getEleme ntsByTagName("t d").item(0);
      el.parentNode.r emoveChild(
      el[(cel.rowSpan==" 2"?"next":"prev ious")+"Sibling "]);
      el.parentNode.r emoveChild(el);
      }
      }
      </script>

      <table id="main" border="2">
      <tbody>
      <tr>
      <td>Dynamic Table Demo</td>
      <td colspan="3">
      <input type="button"
      onclick="addRow To('main')"
      value="Add Row">
      </td>
      </tr>
      </tbody>
      </table>


      HTH
      Yep.

        Comment

        Previous template Next
        Working...