Jump to content


Photo

Add and remove content


  • Please log in to reply
4 replies to this topic

#1 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 05 September 2006 - 07:42 PM

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;

The html to do the add rows is simply this:
<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!

#2 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 06 September 2006 - 05:33 PM

*** bump ***

#3 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 07 September 2006 - 12:47 AM

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...
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);
}

see if that works.




follow me on twitter @PHPsycho

#4 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 07 September 2006 - 05:05 PM

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...

#5 radalin

radalin
  • Members
  • PipPipPip
  • Advanced Member
  • 179 posts

Posted 09 September 2006 - 12:29 AM

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
Roy Simkes
Yet Another Parkyeri Developer




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users