Jump to content

Archived

This topic is now archived and is closed to further replies.

freakus_maximus

Add and remove content

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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.



Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.