3 Replies - 1467 Views - Last Post: 24 February 2011 - 05:38 PM

#1 supersloth  Icon User is offline

  • serial frotteur - RUDEST MEMBER ON D.I.C.
  • member icon


Reputation: 4664
  • View blog
  • Posts: 28,487
  • Joined: 21-March 01

Dynamically Add Rows

Posted 21 February 2007 - 02:36 PM

Description: directions are all in comments of code. work in firefox 2.0 and ie6. this snippet dynamically adds a row to a table, includes examples on how to create various inputs within dynamic row.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script language="Javascript" type="text/javascript">
     function addRow()
     {
          // grab the element, i.e. the table your editing, in this we're calling it 
          // 'mySampleTable' and it is reffered to in the table further down on the page 
          // with a unique of id of you guessed it, 'mySampleTable'
          var tbl = document.getElementById('mySampleTable');
          // grab how many rows are in the table
          var lastRow = tbl.rows.length;

          // if there's no header row in the table (there should be, code at least one 
          //manually!), then iteration = lastRow + 1
          var iteration = lastRow;
          // creates a new row
          var row = tbl.insertRow(lastRow);

          // left cell
          // insert a cell
          var cellLeft = row.insertCell(0);
          // here we're just using numbering the cell, like anything else you don't
          // have to use this, but i've kinda noticed users tend to like them
          var textNode = document.createTextNode(iteration);
          // takes what we did (create the plain text number) and appends it the cell
          // we created in the row we created. NEAT!
          cellLeft.appendChild(textNode);

          // right cell
          // another cell!
          var cellRight = row.insertCell(1);
          // creating an element this time, specifically an input
          var el = document.createElement('input');
          // a data type of text
          el.type = 'text';
          // the name of the element txtRow, and because this is dynamic we also
          // append the row number to it, so for example if this is the eigth row
          // being created the text box will have the name of txtRow8. super fantastic.
          el.name = 'txtRow' + iteration;
          // the exact same thing with a unique id
          el.id = 'txtRow' + iteration;
          // set it to size of 40. setting sizes is good.
          el.size = 40;

          // same thing as earlier, append our element to our freshly and clean cell
          cellRight.appendChild(el);

          // select cell
          // our last cell!
          var cellRightSel = row.insertCell(2);
          // create another element, this time a select box
          var sel = document.createElement('select');
          // name it, once again with an iteration (selRow8 using the example above)
          sel.name = 'selRow' + iteration;
          // crates options in an array
          // the Option() function takes the first parameter of what is being displayed
          // from within the drop down, and the second parameter of the value it is carrying over
          sel.options[0] = new Option('text zero', 'value0');
          sel.options[1] = new Option('text one', 'value1');
          sel.options[2] = new Option('text two', 'value2');
          // append our new element containing new options to our new cell
          cellRightSel.appendChild(sel);
     }

     function removeRow()
     {
          // grab the element again!
          var tbl = document.getElementById('mySampleTable');
          // grab the length!
          var lastRow = tbl.rows.length;
          // delete the last row if there is more than one row!
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
     }

</script>





<html>
     <head>
          <title>Page Title</title>
     </head>
     <body leftmargin="0" topmargin="0">
          <!--- forms are good when you wanna actually do stuff --->
          <form action="addrow.html" name="eval_edit" method="post" format="html">
               <table align="center" width = "75%">
                    <tr>
                         <td align = "center">
                              click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
                         </td>
                    </tr>
                    <tr>
                         <td align = "center">
                              <!--- very imporant to give the table an id --->
                              <!--- otherwise it won't know where to edit --->
                              <table border="1" id="mySampleTable">
                                     <tr>
                                        <td>
                                             Lesson
                                        </td>
                                        <td>
                                             Title
                                        </td>
                                        <td>
                                             Instructor
                                        </td>
                                   </tr>
                                   <!--- i create the initial row by hand, there are a lot of --->
                                   <!--- different ways to do this depending on what parsing --->
                                   <!--- language you use, i found this was easiest for the  --->
                                   <!--- snippet, but experiment, do your thing mang. --->
                                   <!--- this matches the same specs we laid out in the javascript --->
                                   <tr>
                                        <td>
                                             1
                                        </td>
                                        <td>
                                             <input type="text" name="txtRow1" id="txtRow1" size="40" /></td>
                                        <td>
                                             <select name="selRow0">
                                                  <option value="value0">text zero</option>
                                                  <option value="value1">text one</option>
                                                  <option value="value2">text two</option>
                                             </select>
                                        </td>
                                   </tr>
                              </table>

                              <!--- our buttons call our javascript functions when clicked --->
                              <input type="button" value="Add" onclick="addRow();" />
                              <input type="button" value="Remove" onclick="removeRow();" />
                              <input type="submit" value="Submit" />
                         </td>
                    </tr>
               </table>
          </form>
     </body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Dynamically Add Rows

#2 z3irr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 04-November 09

Re: Dynamically Add Rows

Posted 04 November 2009 - 09:37 AM

you are the best, thank you very much, you have rescued me :P. i need some help after running this javascript code, if i want to take the values of each input text i have already added... how can i do that? you will be the best of the best if you give me the answer :D
Was This Post Helpful? 0
  • +
  • -

#3 pratss  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 0
  • Joined: 06-December 10

Re: Dynamically Add Rows

Posted 06 December 2010 - 03:46 AM

hi.. how to add multiple column fields here in this code
Was This Post Helpful? 0
  • +
  • -

#4 jeremejazz  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 22
  • View blog
  • Posts: 48
  • Joined: 23-April 10

Re: Dynamically Add Rows

Posted 24 February 2011 - 05:38 PM

alright. you got a rating there
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1