CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
user3522349
user3522349

Reputation: 27

Adding row to table with datepicker

I am trying to add row with button click in table(Add Row). I am trying to add 2 fields dynamically. 1) slno
2) Date/ Time.

My problems : 1) Row is not getting added. 2) How to assign datepicker to "Date /Time" field, added dynamically.

Jsfiddle is http://jsfiddle.net/RXzs7/12/

Pl help.

html code :

<script>  
$(document).ready(function() {
    $('.date').each(function() {
        $(this).datepicker({ minDate:"-1m",maxDate:"0"  });
    });
}); 
</script>

<body>

  <div id="lpage_container">
    <div class="lform_container">
      <h3>DETAILS OF LOCAL CONVEYANCE EXPENSES :</h3>

      <form id="localexpenses" action="">
        <table  summary="local expense" id="localexpense_table" width="500" border="1">
          <thead>
            <tr>
              <th width="1%" align="center"><strong>Sl.
              No.</strong></th>

              <th width="7%" align="center">
              <strong>Date/Time</strong></th>          
              <th width="8%" align="center">
              <strong>Remove</strong></th>
            </tr>
          </thead>

          <tbody bgcolor="#CCCCCC">
            <tr>
              <td width="1%" align="center"><input type="text"
              name="lsrno_00" id="srno_00" size="1" value="0"></td>

              <td width="7%" align="center"><input type="text" class="date"
              name="ldate_00" id="ldate_00" value="" size="8"></td>
              <td>&nbsp;</td>
            </tr>
          </tbody>
        </table>

        <table summary="local buttons" width="500" border="1">
          <tr>
            <td align="right"><input type="button" value="Add Row"
            id="add_ExpenseRowlocal">            
          </tr>
        </table>
      </form>
    </div><!-- END subject_marks -->
    <div class="clearfix"></div>
  </div>

JS code :

$(function(){
    // GET ID OF last row and increment it by one
    var $lastChar =1, $newRow;
    $get_lastID = function(){
        var $id = $('#localexpense_table tr:last-child td:first-child input').attr("name");
        $lastChar = parseInt($id.substr($id.length - 2), 10);
        console.log('GET id: ' + $lastChar + ' | $id :'+$id);
        $lastChar = $lastChar + 1;
        $newRow = "<tr> \
        <td><input type='text' name='lsrno_0"+$lastChar+"' value='0"+$lastChar+"' size='1'readonly /></td> \
        <td><input type='text' class='date' name='ldate_0"+$lastChar+"' id='date_0"+$lastChar+"' size='8'/></td> \
        <td><input type='button' value='Remove' class='del_ExpenseRowlocal' /></td> \
    </tr>";
        return $newRow;
    };

    // ***** -- START ADDING NEW ROWS
    $('#add_ExpenseRowlocal').on("click", function(){ 

        if($lastChar <= 9){
            $get_lastID();
            $('#localexpense_table tbody').append($newRow);
        } else {
            alert("Reached Maximum Rows!");
        }
    });
        $(document).on("click", ".del_ExpenseRowlocal", function(){ 
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
    }); 
});

Upvotes: 2

Views: 3453

Answers (1)

Adam
Adam

Reputation: 6733

What jQuery version are you using? In your fiddle you have not added jQuery via the framework tab but under extenral resources you have two versions: 1.6.2 and 1.11.0. When I try and run it I get an error in the console that $().onis not a function. .on() came in jQuery 1.7 so if you are using 1.6.2 then you cannot use .on().

As for the date picker, when you run 

$('.date').each(function() {
   $(this).datepicker({ minDate:"-1m",maxDate:"0"
});

in your document ready you add a date picker to all field with class date which currently exist. You must add the date picker to the new date fields after you have added the row to the DOM. Something like

$('.date', $('#localexpense_table tbody tr').filter(':last')).each(function() {
   $(this).datepicker({ minDate:"-1m",maxDate:"0"  });
});

after your .append() call should work.

Working fiddle (needs some styles fixing for the added rows)

Upvotes: 2

Related Questions