www.webdeveloper.com
Results 1 to 5 of 5

Thread: Add/Remove rows from table having Drop Down List using javascript

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    3

    Add/Remove rows from table having Drop Down List using javascript

    Hello Everyone,
    I have a table with 3 rows which I want to dynamically add or delete the 3 row with a click of button. I know there are good Javascript experts in this forum who can help me with this. My skills in javascript are not sufficient. Attached is the code I want to put the "Add/Delete" button. Thanks in advance.
    Attached Files Attached Files

  2. #2
    Join Date
    Sep 2007
    Posts
    315
    Code:
      
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?279951-Add-Remove-rows-from-table-having-Drop-Down-List-using-javascript
    // http://www.w3schools.com/jsref/met_node_clonenode.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_clonenode
    // http://www.w3schools.com/jsref/met_node_removechild.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_removechild
    
    
    function myFunction()
    {
    var row=document.getElementById("myTable").lastChild;
    var cln=row.cloneNode(true);
    document.getElementById("myTable").appendChild(cln);
    
    }
    
    function myFunction2()
    {
    var tablo=document.getElementById("myTable");
    tablo.removeChild(tablo.lastChild);
    }
    </script>
    HTML Code:
    <button onclick="myFunction()">add</button>
    
    <button onclick="myFunction2()">delete</button>
    
       <table id="myTable">
    Last edited by Ayşe; 06-24-2013 at 01:04 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    Join Date
    Jun 2013
    Posts
    3
    Hello Ayse,
    Thank you for this piece of code. Since I am still new to this, I am trying to change some other elements in the script to see how far I will go. I tried to add the script to the html code, the buttons were showing but they were inactive. Thank you in advance for your continued support

  4. #4
    Join Date
    Sep 2007
    Posts
    315
    Code:
       
    <html>
    <head>
    <script type="text/javascript">
    function f1(){
    var el=document.getElementById("myTable");
    // alert(row.nodeName);  // TBODY
    var cln = el.lastChild.cloneNode(true);
    el.appendChild(cln);
    }
    function f2(){
    var tablo=document.getElementById("myTable");
    tablo.removeChild(tablo.lastChild);
    }
    </script>
    </head>
    <body>
    <button onclick="f1()">add</button>
    <button onclick="f2()">delete</button>
    <table id="myTable">
    <tr>
    <td style="width:125px;">* Start Date/Time:</td>
    <td>
    <input autocomplete="off" tabindex="2001" type="text" class="datepicker" name="EventStartDate" id="EventStartDate"  value="2013-06-20" />
    <span class="helper-text hide-if-js">YYYY-MM-DD</span>
    <span class='timeofdayoptions'>
    @<select tabindex="2002" name='EventStartHour'>
    <option value='01'>01</option>
    <option value='02'>02</option>
    <option value='03'>03</option>
    <option value='04'>04</option>
    <option value='05'>05</option>
    <option value='06'>06</option>
    <option value='07'>07</option>
    <option value='08' selected="selected">08</option>
    <option value='09'>09</option>
    <option value='10'>10</option>
    <option value='11'>11</option>
    <option value='12'>12</option>
    </select>
    <select tabindex="2003" name='EventStartMinute'>
    <option value='00' selected="selected">00</option>
    <option value='05'>05</option>
    <option value='10'>10</option>
    <option value='15'>15</option>
    <option value='20'>20</option>
    <option value='25'>25</option>
    <option value='30'>30</option>
    <option value='35'>35</option>
    <option value='40'>40</option>
    <option value='45'>45</option>
    <option value='50'>50</option>
    <option value='55'>55</option>
    </select>
    <select tabindex="2004" name='EventStartMeridian'>
    <option value='am' selected="selected">am</option>
    <option value='pm'>pm</option>
    </select>
    </span>
    </td>
    </tr>
    <tr>
    <td>*End Date/Time:</td>
    <td>
    <input autocomplete="off" type="text" class="datepicker" name="EventEndDate" id="EventEndDate"  value="2013-06-20" />
    <span class="helper-text hide-if-js">YYYY-MM-DD</span>
    <span class='timeofdayoptions'>
    @<select class="tribeEventsInput" tabindex="2005" name='EventEndHour'>
    <option value='01'>01</option>
    <option value='02'>02</option>
    <option value='03'>03</option>
    <option value='04'>04</option>
    <option value='05' selected="selected">05</option>
    <option value='06'>06</option>
    <option value='07'>07</option>
    <option value='08'>08</option>
    <option value='09'>09</option>
    <option value='10'>10</option>
    <option value='11'>11</option>
    <option value='12'>12</option>
    </select>
    <select tabindex="2006" name='EventEndMinute'>
    <option value='00' selected="selected">00</option>
    <option value='05'>05</option>
    <option value='10'>10</option>
    <option value='15'>15</option>
    <option value='20'>20</option>
    <option value='25'>25</option>
    <option value='30'>30</option>
    <option value='35'>35</option>
    <option value='40'>40</option>
    <option value='45'>45</option>
    <option value='50'>50</option>
    <option value='55'>55</option>
    </select>
    <select tabindex="2007" name='EventEndMeridian'>
    <option value='am'>am</option>
    <option value='pm' selected="selected">pm</option>
    </select>
    </span>
    </td>
    </tr>
    <tr class="recurrence-row">
    <td>Recurrence:</td>
    <td>
    <input type="hidden" name="is_recurring" value="false" />
    <input type="hidden" name="recurrence_action" value="" />
    <select name="recurrence[type]">
    <option data-plural="" value="None" >None</option>
    <option data-single="day" data-plural="days" value="Every Day" >Every Day</option>
    <option data-single="week" data-plural="weeks" value="Every Week" >Every Week</option>
    <option data-single="month" data-plural="months" value="Every Month" >Every Month</option>
    <option data-single="year" data-plural="years" value="Every Year" >Every Year</option>
    <option data-single="event" data-plural="events" value="Custom" >Custom</option>
    </select>
    <span id="recurrence-end" style="display: none">
    End<select name="recurrence[end-type]">
    <option value="On" >On</option>
    <option value="After" >After</option>
    </select>
    <input autocomplete="off" placeholder="2013-06-20" type="text" class="datepicker" name="recurrence[end]" id="recurrence_end"  value="" style="display:inline"/>
    <span id="rec-count" style="display:none"><input autocomplete="off" type="text" name="recurrence[end-count]" id="recurrence_end_count"  value="1" style='width: 40px;'/> <span id='occurence-count-text'></span></span>
    <span id="rec-end-error" class="rec-error">You must select a recurrence end date</span>
    </span>
    </td>
    </tr>
    <tr class="recurrence-row" id="custom-recurrence-frequency" style="display: none;">
    <td></td>
    <td>
    Frequency<select name="recurrence[custom-type]">
    <option value="Daily" data-plural="Day(s)" data-tablerow="" >Daily</option>
    <option value="Weekly" data-plural="Week(s) on:" data-tablerow="#custom-recurrence-weeks" >Weekly</option>
    <option value="Monthly" data-plural="Month(s) on the:" data-tablerow="#custom-recurrence-months" >Monthly</option>
    <option value="Yearly" data-plural="Year(s) on:" data-tablerow="#custom-recurrence-years" >Yearly</option>
    </select>
    Every<input type="text" name="recurrence[custom-interval]" value=""/> <span id="recurrence-interval-type"></span>
    <input type="hidden" name="recurrence[custom-type-text]" value=""/>
    <input type="hidden" name="recurrence[occurrence-count-text]" value=""/>
    </td>
    </tr>
    <tr class="custom-recurrence-row" id="custom-recurrence-weeks" style="display: none;">
    <td></td>
    <td>
    <label><input type="checkbox" name="recurrence[custom-week-day][]" value="1" /> M</label>
    <label><input type="checkbox" name="recurrence[custom-week-day][]" value="2" /> Tu</label>
    <label><input type="checkbox" name="recurrence[custom-week-day][]" value="3" /> W</label>
    <label><input type="checkbox" name="recurrence[custom-week-day][]" value="4" /> Th</label>
    <label><input type="checkbox" name="recurrence[custom-week-day][]" value="5" /> F</label>
    <label><input type="checkbox" name="recurrence[custom-week-day][]" value="6" /> Sa</label>
    <label><input type="checkbox" name="recurrence[custom-week-day][]" value="7" /> Su</label>
    </td>
    </tr>
    <tr class="custom-recurrence-row" id="custom-recurrence-months" style="display: none;">
    <td></td>
    <td>
    <div id="recurrence-month-on-the">
    <select name="recurrence[custom-month-number]">
    <option value="First"  selected='selected'>First</option>
    <option value="Second" >Second</option>
    <option value="Third" >Third</option>
    <option value="Fourth" >Fourth</option>
    <option value="Last" >Last</option>
    <option value="">--</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    </select>
    <select name="recurrence[custom-month-day]" style="display: inline">
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
    <option value="7">Sunday</option>
    <option value="-">--</option>
    <option value="-1">Day</option>
    </select>
    </div>
    </td>
    </tr>
    <tr class="custom-recurrence-row" id="custom-recurrence-years"  style="display: none;">
    <td></td>
    <td>
    <div>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="1" /> Jan</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="2" /> Feb</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="3" /> Mar</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="4" /> Apr</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="5" /> May</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="6" /> Jun</label>
    </div>
    <div style="clear:both"></div>
    <div>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="7" /> Jul</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="8" /> Aug</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="9" /> Sep</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="10" /> Oct</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="11" /> Nov</label>
    <label><input type="checkbox" name="recurrence[custom-year-month][]" value="12" /> Dec</label>
    </div>
    <div style="clear:both"></div>
    <div>
    <input type="checkbox" name="recurrence[custom-year-filter]" value="1" />
    On the:<select name="recurrence[custom-year-month-number]">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
    <option value="-1">Last</option>
    </select>
    <select name="recurrence[custom-year-month-day]">
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
    <option value="4">Thursday</option>
    <option value="5">Friday</option>
    <option value="6">Saturday</option>
    <option value="7">Sunday</option>
    <option value="-">--</option>
    <option value="-1">Day</option>
    </select>
    </div>
    </td>
    </tr>
    </table>   
    </body>
    </html>
    Last edited by Ayşe; 06-25-2013 at 11:28 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  5. #5
    Join Date
    Jun 2013
    Posts
    3
    Hello Ayse,
    The code just did exactly what I was looking for!!!. Thank you for your help, I have learned something very important

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles