Add and remove content

[freakus_maximus]

I modified some code i found here earlier and all that is working fine, but I need to know how to call the 'remove rows'. The add rows works just fine and the code appears to be in place for the removal of a row, but how do I call that in the html? I looked back at the original post for this but did not see the method in that post.


var numrows = 1;
function drawoptions()
{
   var tbl = document.getElementById("task_tbl");
   var targetnumrows = parseInt(document.getElementById("numoptions").value + "");
   // if they've selected to show more rows, then we add more rows
   if(targetnumrows > numrows)
   {
       for(var i=0; i<targetnumrows - numrows; i++)
       {
           var row = tbl.insertRow(tbl.rows.length);

           // create the checkbox cell
           var cell = row.insertCell(0);
           var checkboxfield = document.createElement("input");
           checkboxfield.setAttribute("type", "checkbox");
           checkboxfield.setAttribute("id", "Checkbox[" + (numrows+i) + "]");
   checkboxfield.setAttribute("name", "Checkbox[" + (numrows+i) + "]");
           //checkboxfield.setAttribute("value", "Checked");
           cell.appendChild(checkboxfield);
   cell.setAttribute('align','center');

   
           // create the textarea cell
           cell = row.insertCell(1);
           var tdescfield = document.createElement("textarea");
   tdescfield.setAttribute("cols", "60");
   tdescfield.setAttribute("rows", "3");
           tdescfield.setAttribute("id", "Tdescr[" + (numrows+i) + "]");
   tdescfield.setAttribute("name", "Tdescr[" + (numrows+i) +"]");    
           cell.appendChild(tdescfield);
       }
   }
   // they've decided to show less rows, so we remove some
   else
   {
       for(var i=0; i<numrows - targetnumrows; i++)
       {
           tbl.deleteRow(tbl.rows.length - 1);
       }
   }

   numrows = tbl.rows.length - 1;
   document.getElementById("numoptions").value=tbl.rows.length; 
   //alert(numrows);
}

window.onload = drawoptions;

[b]The html to do the add rows is simply this:[/b]
<a align="center" href="javascript:drawoptions();">add task</a>

When I click the link that is created in the html it adds a new row appropriatly. But I need to have the ability to remove a row just in case the user did added too many.

Any ideas?

Thanks!

[freakus_maximus]

*** bump ***

[ToonMariner]

just wondering if you can use removeChild and appendChild....

have two links like so...

<a href="javascript:drawoptions('add');">Add Row</a>
<a href="javascript:drawoptions('remove');">Remove Row</a>

and the script...
[code]var numrows = 1;
function drawoptions(type)
{
  var tbl = document.getElementById("task_tbl");
  var targetnumrows = parseInt(document.getElementById("numoptions").value + "");
  // if they've selected to show more rows, then we add more rows
  if(type == 'add')
  {
      for(var i=0; i<targetnumrows - numrows; i++)
      {
          var row = tbl.insertRow(tbl.rows.length);

          // create the checkbox cell
          var cell = row.insertCell(0);
          var checkboxfield = document.createElement("input");
          checkboxfield.setAttribute("type", "checkbox");
          checkboxfield.setAttribute("id", "Checkbox[" + (numrows+i) + "]");
        checkboxfield.setAttribute("name", "Checkbox[" + (numrows+i) + "]");
          //checkboxfield.setAttribute("value", "Checked");
          cell.appendChild(checkboxfield);
        cell.setAttribute('align','center');

 
          // create the textarea cell
          cell = row.insertCell(1);
          var tdescfield = document.createElement("textarea");
        tdescfield.setAttribute("cols", "60");
        tdescfield.setAttribute("rows", "3");
          tdescfield.setAttribute("id", "Tdescr[" + (numrows+i) + "]");
        tdescfield.setAttribute("name", "Tdescr[" + (numrows+i) +"]");       
          cell.appendChild(tdescfield);
      }
  }
  // they've decided to show less rows, so we remove some
  else
  {
      for(var i=0; i<numrows - targetnumrows; i++)
      {
          tbl.deleteRow(tbl.rows.length - 1);
      }
  }

  numrows = tbl.rows.length - 1;
  document.getElementById("numoptions").value=tbl.rows.length; 
  //alert(numrows);
}
[/code]

see if that works.

[freakus_maximus]

Thanks Toon, but I tried that and the "add row" works, but not the "remove row".

I don't know enough about javascript, so hard for me to tell if it's the way it's being called or the something in the script.  ???

Any help would be appreciated...

[radalin]

Instead of using numbers for deleting try using id's of rows. Maybe this can work. I'm not sure if the method will accept id's but it worths a try I think