Question

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

我的问题： 1）没有添加行。 2）如何将日期选择器分配给动态添加的“日期/时间”字段。

帮助。

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

Answer 1

你使用的是什么jQuery版本？在您的小提琴中，您没有通过框架选项卡添加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()来电之后

。

Working fiddle（需要为添加的行修复某些样式）

使用datepicker向表添加行

1 个答案: