Add and Delete Row function

#1

Hi All, I have been facing some problem with Adding of row. Please help me how to resolve this.

I have a Js function as shown below:

function addTravelRow(tbl_travel) {
  var $j = jQuery.noConflict();
  $j(".last_date").datepicker("destroy");
  $j(".assigned_date").datepicker("destroy");
  var table = document.getElementById(tbl_travel);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[2].cells.length;

  for(var i=0; i<colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[2].cells[i].innerHTML;
    switch(newcell.childNodes[2].type) {
      case "text":
          newcell.childNodes[2].value = "";
          break;
      case "checkbox":
          newcell.childNodes[2].checked = false;
          break;
      case "select-one":
          newcell.childNodes[2].selectedIndex = 2;
          break;
          
    }
  }

I am able to add row but while adding row its copying the earlier data. So, how do i overcome it. My php file for adding row is shown below.

                        <table style="max-width:880px" border="1" bordercolor="#c1dde4" cellspacing="0" cellpadding="5" id="tbl_travel">
                                                                                   
                        <tr class="accombg">
                            <td colspan="4" align="center"><strong>Travel</strong></td>
                            <td colspan="4" align="center"><strong>Date and Time </strong></td>
                            <td rowspan="2" style="min-width:110px;max-width:120px;" align="center"><strong>Travel Mode (Airport PickUp/Drop) </strong></td>
                        </tr>
                        <tr class="accombg">
                            <td align="center">Origin <span class="redtext">* </span >
                            <p><span class="accombgsmalltext"> (Enter country if foreign, City if India)</span></p></td>
                            <td align="center">Origin City <span class="redtext">*</span><p><span class="accombgsmalltext"> (If Foreign)</span></p></td>
                            <td align="center">Destination <span class="redtext">*</span></span><p><span class="accombgsmalltext">(Enter country if foreign, City if India)</span></p></td>
                            <td align="center">Destination City <span class="redtext">*</span><p><span class="accombgsmalltext"> (If Foreign)</span></p></td>
                            <td style="min-width:50px;max-width:50px" align="center">Departure<span class="redtext">*</span></td>
                            <td width="60" align="center">Time</td>
                            <td style="min-width:50px;max-width:50px;" align="center">Arrival <span class="redtext">*</span></td>
                            <td width="60" align="center">Time</td>
                            </td>
                        </tr>
                            <tr class="sectionbg" id="jsTravelDet">
                                <td>
                                    <div>
                                        <select name="travel_det[dep_place][]" style="width:110px;" id="dep_place" onchange="showForm19(this.value, this, 'dep_place');" class="jsTravelCls jsCityCls" >
                                        <?php $label = ''; $group = 0; ?>
                                            <?php foreach ($city_list as $key => $value) { ?>
                                                    <?php if($label == '' || $value['group_name'] != $label) { ?>
                                                        <?php if($group) { ?>
                                                            </optgroup>
                                                        <?php } ?>
                                                        <optgroup label="<?php echo ($value['group_name'] == 'INDIA') ? 'DOMESTIC': $value['group_name']; ?>" class="grey">
                                                    <?php
                                                            $group ++;
                                                            $label = $value['group_name'];
                                                        } ?>
                                                        <option <?php echo (in_array($value['name'], $city_sens)) ? "style='color:red'" : ''; ?> value="<?php echo $key ?>" ><?php echo $value['name'] ?></option>

                                            <?php } ?>
                                            <optgroup label="Others">
                                                <option value="Others">Others</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                    <div></div>
                                    </td>
                                <td>
                                    <input type="text" readonly="readonly" name="travel_det[dep_place_city][]" id="dep_place_city" style="width:80px;"  class="jsTravelCls" />
                                </td>

                                <td>
                                    <div>
                                        <select name="travel_det[arr_place][]" style="width:110px;" onchange="showForm19(this.value, this, 'arr_place');toDisableEditRead(this.value, this, 'arr_place')" id="arr_place" class="jsTravelCls jsCityCls">
                                            <?php foreach ($city_list as $key => $value) { ?>
                                                    <?php if($label == '' || $value['group_name'] != $label) { ?>
                                                        <?php if($group) { ?>
                                                            </optgroup>
                                                        <?php } ?>
                                                        <optgroup label="<?php echo ($value['group_name'] == 'INDIA') ? 'DOMESTIC': $value['group_name']; ?>" class="grey">
                                                    <?php
                                                            $group ++;
                                                            $label = $value['group_name'];
                                                        } ?>
                                                        <option <?php echo (in_array($value['name'], $city_sens)) ? "style='color:red'" : ''; ?> value="<?php echo $key ?>" ><?php echo $value['name'] ?></option>
                                                        <?php } ?> 
                                                        <optgroup label="Others">
                                                             <option value="Others">Others</option>
                                                        </optgroup>
                                                    </select>
                                                </div>
                                            </td>
                                <td>
                                    <input type="text" readonly="readonly" name="travel_det[arr_place_city][]" id="arr_place_city" style="width:80px;"  class="jsTravelCls"/>
                                </td>
                                <script>
                                      $(function() {
                                        $('#assigned_date').datepicker({
                                             dateFormat: 'mm/dd/yy',
                                             minDate: new Date()
                                         });
                                      });
                                </script>
                                <td>
                                    <input style="min-width:80px;max-width:80px" type="text" name="travel_det[dep_date][]" value="" id="assigned_date" class="assigned_date" />
                                </td>

                                <td>
                                    <div>
                                        <select name="travel_det[time_zone1][]" style="max-width:50px"  class="jsTravelCls">
                                            <?php
                                                foreach ($time_zone as $tme_zone) {
                                                    echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
                                                }
                                            ?>
                                        </select>
                                    </div>
                                </td>
                                <td>
                                    <input style="min-width:80px;max-width:80px" type="text" name="travel_det[arr_date][]" value="" id="last_date" class="last_date" />
                                </td>
                                <td>
                                    <div id="tz2">
                                        <select name="travel_det[time_zone2][]" style="width:50px" class="jsTravelCls">
                                        <?php
                                        foreach ($time_zone as $tme_zone) {
                                            echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
                                        }
                                        ?>
                                        </select>
                                    </div>
                                </td>
                                <td align="center">
                                    <div align="center">
                                        <select name="travel_det[t_mode][]" style="width:60px;" class="jsTravelCls">
                                            <?php
                                            foreach ($travel_mode as $tra_mode) {
                                                echo "<option value=\"" . $tra_mode . "\">" . $tra_mode . "</option>";
                                            }
                                            ?>
                                        </select>
                                    </div>
                                    <div style="font-size:10px;">
                                        Pickup<input type="checkbox" name="to_airport" id="to_airport"> 
                                   
                                        Drop<input type="checkbox" name="from_airport" id="from_airport">
                                    </div>
                                </td>                                                    
                            </tr>
                        </table>
                        <tr>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <p id="addnew">
                                            <a href="javascript:void(0)" class="addlinks" onclick="addTravelRow('tbl_travel')"> + Insert Row </a>
                                        </p>
                                    </td>
                                    <td>
                                        <p id="delrow_t" >
                                            <a href="javascript:void(0)" class="addlinks" onclick="delIt('tbl_travel')"> - Delete Row </a>
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
#2

travel

As shown in the above image, whenever I am trying to click on +Insert Row: it is taking previous data(replica of the data inserted i.e., Origin, origin city, destination, destination city entered and so on…). I want to know where I am going wrong and why is such happening. Please help me.

#3

Using some made up $city_list data, your code works for me and doesn’t copy the origin/destination choices, however, I corrected some html markup errors (missing and mismatched elements) and bypassed things I don’t have or know about your page. You are also not closing the final dynamically built /optgroup tag in each select menu.

You need to validate your resultant html at validator.w3.org and make sure there are no errors in your browser’s developer console.

I do have a suggestion for the $city_list data that will simplify the code needed to produce the optgroup and option tags. Your current $city_list data looks like -

// main index is the city id
$city_list[1] = ['group_name'=>'g1','name'=>'c1'];
$city_list[2] = ['group_name'=>'g1','name'=>'c2'];
$city_list[3] = ['group_name'=>'g2','name'=>'c3'];
$city_list[4] = ['group_name'=>'g2','name'=>'c4'];

If you change this to be like -

// main index is the group_name
$city_list['g1'][] = ['id'=>1,'name'=>'c1'];
$city_list['g1'][] = ['id'=>2,'name'=>'c2'];
$city_list['g2'][] = ['id'=>3,'name'=>'c3'];
$city_list['g2'][] = ['id'=>4,'name'=>'c4'];

The code producing the optgroups and options would look like -

								<?php
								foreach($city_list as $group_name=>$arr)
								{
									// start optgroup
									?>
									<optgroup label="<?php echo $group_name == 'INDIA' ? 'DOMESTIC': $group_name; ?>" class="grey">
									<?php
									foreach($arr as $value)
									{
										// output options
										?>
										<option <?php echo in_array($value['name'], $city_sens) ? "style='color:red'" : ''; ?> value="<?php echo $value['id'] ?>" ><?php echo $value['name'] ?></option>
										<?php
									}
									// close optgroup - the final /optgroup tag is not being output in the original code
									?>
									</optgroup>
									<?php
								}
								?>
#4

Thanks alot for making it so simple. I will try doing this. Thanks once again