使用日期选择器将行添加到表中

Adding row to table with datepicker

本文关键字：添加 日期 选择器      更新时间：2023-09-26

我正试图通过点击表中的按钮添加行（添加行）。我正在尝试动态添加2个字段。1） slno
2） 日期/时间。

我的问题：1） 未添加行。2） 如何将日期选择器分配到"日期/时间"字段，动态添加。

Jsfidle是http://jsfiddle.net/RXzs7/12/

Pl帮助。

html代码：

<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代码：

$(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;
    }); 
});

您使用的jQuery版本是什么？在您的fiddle中，您没有通过框架选项卡添加jQuery，但在扩展资源下，您有两个版本：1.6.2和1.11.0。当我尝试运行它时，我在控制台中得到一个错误，即$().on不是一个函数。.on()出现在jQuery 1.7中，因此如果您使用的是1.6.2，则不能使用.on()。

至于日期选择器，当您运行时

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

在准备好的文档中，将日期选择器添加到当前存在的类日期为的所有字段。将行添加到DOM后，必须将日期选择器添加到新的日期字段中。类似的东西

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

在您的.append()呼叫之后应该可以工作。

工作小提琴（需要为添加的行修复一些样式）

相关文章：