动态添加时间jquery ui datepicker？ [英] adding time jquery ui datepicker dynamically?

问题描述

我真的需要一点帮助，我的动态表时间表。我想添加datepicker日期文本动态提交文本？任何人都可以传唤我吗？此代码会在用户点击添加新行时向表中添加新行？

  $（document）.ready（function（$） {
 //单击按钮时触发事件
 $（button）。click（function（）{
 //使用addTableRow函数向表中添加新行
 addTableRow $（table））; 
 
 //防止按钮重定向到新页面
返回false; 
}）; 
 
 // function to通过克隆最后一行并
 //将名称和id值递增1以使它们唯一
 function addTableRow（table）{
 // clone the last在表中的行
 var $ tr = $（table）.find（tbody tr：last）。clone（）; 
 
 //获取输入的name属性并选择字段
 $ tr.find（input，select）。attr（name，function（）{
 //将字段名称分成两部分
 var parts = this.id.match（/（\D +）（ \\d +）$ /）; 
 
 //为新字段创建一个唯一的名称，方法是将
 //前一个字段的数字加1 
 return parts [1] + ++ parts [2] ; 
 //为id属性重复
））。attr（id，function（）{
 var parts = this.id.match（/（\D +）（\d + ）$ /）; 
 return parts [1] + ++ parts [2]; 
}）; 
 
 //将新行追加到表
 $（table）.find（tbody tr：last）。after（$ tr）; 
}; 
 
}）; 
 
< table> 
< thead> 
< tr> 
< th scope =col>日期< / th> 
< th scope =col>开始时间< / th> 
< th scope =col>结束时间< / th> 
< th scope =col>小时类型< / th> 
 
< / tr> 
< / thead> 
 
 
< tbody> 
< tr> 
< td><输入名称=date1id =date1>< / td> 
< td><输入名称=startTime1id =startTime1>< / td> 
< td><输入名称=endTime1id =EndTime1>< / td> 
< td> 
< select name =hourType1id =hourType1> 
< option value =>请选择< / option> 
< option value =1>常规< / option> 
< option value =2>加班< / option> 
< / select> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
<按钮>添加行< / button> 
  

解决方案

/ code>使用类：

HTML

 < td>< input name =date1class =date>< / td> 
  

jQuery
< 。pre> $（ 日期）日期选择器（）;


Hi I really need little help with my dynamic table "Timesheet ". I want add datepicker to date text filed dynamically? could anyone hlep me? this code will add new row to table when user click add new row ?

  $(document).ready(function ($) {
    // trigger event when button is clicked
    $("button").click(function () {
        // add new row to table using addTableRow function
        addTableRow($("table"));

        // prevent button redirecting to new page
        return false;
    });

    // function to add a new row to a table by cloning the last row and
    // incrementing the name and id values by 1 to make them unique
    function addTableRow(table) {
        // clone the last row in the table
        var $tr = $(table).find("tbody tr:last").clone();

        // get the name attribute for the input and select fields
        $tr.find("input,select").attr("name", function () {
            // break the field name and it's number into two parts
            var parts = this.id.match(/(\D+)(\d+)$/);

            // create a unique name for the new field by incrementing
            // the number for the previous field by 1
            return parts[1] + ++parts[2];
            // repeat for id attributes
        }).attr("id", function () {
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1] + ++parts[2];
        });

        // append the new row to the table
        $(table).find("tbody tr:last").after($tr);
    };

});

  <table>
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Start Time</th>
        <th scope="col">End Time</th>
        <th scope="col">Hour Type</th>

      </tr>
    </thead>


    <tbody>
      <tr>
        <td><input name="date1" id="date1"></td>
        <td><input name="startTime1" id="startTime1"></td>
         <td><input name="endTime1" id="EndTime1"></td>
        <td>
          <select name="hourType1" id="hourType1">
            <option value="">Please select</option>
            <option value="1">Regular</option>
            <option value="2">Overtime</option>
          </select>
        </td>
      </tr>
    </tbody>   
</table>   
<button>Add Row</button>

解决方案

Instead of using id use a class :

HTML

<td><input name="date1" class="date"></td>

jQuery

$(".date").datepicker();

这篇关于动态添加时间jquery ui datepicker？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！