如何使用Jquery动态生成Calendar控件？ [英] How to Dynamically generate Calendar Control using Jquery?

查看：222
本文介绍了如何使用Jquery动态生成Calendar控件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我与动态按钮点击使用Jquery生成行。

FIDDLE： http://jsfiddle.net/a4NSm/2/

现在的问题是，我想的DatePicker添加到它，但我不能，因为它与ID而不是类。

code： 

 ＆LT;脚本SRC =JS / jQuery的-1.11.0.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
     ＆LT;链接rel =stylesheet属性HREF =// code.jquery.com / UI / 1.10.4 /主题/平滑度/ jQuery的-ui.css＆GT;
     ＆LT;链接类型=文/ CSS的href =../ demoengine / demoengine.css的rel =stylesheet属性＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =../ demoengine / demoengine.js异步推迟＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;标题＆GT; jQuery UI的日期选择器：解析与格式日期＆LT; /标题＆GT;
    ＆LT;链接类型=文/ CSS的href =htt​​p://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css的rel =stylesheet属性＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;链接rel =stylesheet属性HREF =/资源/演示/ style.css文件＆GT;  ＆LT;脚本＆GT;
      $（函数（）{
          $（日期选择器）。日期选择器（{
              DATEFORMAT：DD-MM-YY，
              ONSELECT：功能（dateText，研究所）{
                  VAR日期= $ .datepicker.parseDate（inst.settings.dateFormat || $ .datepicker._defaults.dateFormat，dateText，inst.settings）;
                  VAR dateText1 = $ .datepicker.formatDate（D，D M YY，日期，inst.settings）;
                  date.setDate（date.getDate（）+ 7）;
                  VAR dateText2 = $ .datepicker.formatDate（D，D M YY，日期，inst.settings）;
                  $（＃dateoutput）HTML（被选中的日期为＆lt; B＆gt;中。+ dateText1 +＆LT; / B＆GT ;;所选日期+7天产生＆LT; B＆gt;中+ dateText2 +＆LT; / B＆gt;中）;
              }
          }）;
      }）;
  ＆LT; / SCRIPT＆GT;＆LT;表ID =场＆GT;
    ＆LT;＆TBODY GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT;交叉信息＆LT;跨度类='民'＆GT; 1 LT; / SPAN＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;输入类型=文本/＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;选择类=myDropDownLisTId＆GT; ＆LT;输入类型=文本ID =日期选择器类=日期选择/＆GT;＆LT; /选择＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT;按钮式=按钮ID =激活addField＆gt;添加场及LT; /按钮＆GT;
＆LT;按钮式=按钮ID =deleteField＆GT;删除字段＆LT; /按钮＆GT;

JS 

 ＆LT;脚本类型=文/ JavaScript的＆GT;
     $（文件）。就绪（函数（）{
         filldd（）;         VAR rowstring =＆LT; TR＆GT;＆LT; TD类='号'＆GT;交叉信息＆LT; / TD＆GT;＆LT; TD＆GT;＆LT;输入类型='文字'/＆GT;＆LT; / TD＆GT;＆LT; TD＆GT;＆LT;选择类='myDropDownLisTId/＆GT;＆LT;输入类型=文本类='日期选择/＆GT;＆LT; / TD＆GT;＆LT; / TR＆gt;中;
         $（＃激活addField）。点击（函数（事件）{
             $（＃领域TBODY）追加（rowstring）;
             filldd（）;
             如果（$（TD）。hasClass（数字））{
                 VAR我= parseInt函数（民数记：最后一个。$（）文字（））+ 1;
                 $（$（＆下;跨度类='民'＆gt;中+ I +＆下; /跨度＆gt;中））。appendTo（$（。数））接近的（TD）removeClass移除（'。数'）;
             }
             。事件preventDefault（）;
         }）;         $（＃deleteField）。点击（函数（事件）{
             。VAR lengthRow = $（＃领域TBODY TR）的长度;
             如果（lengthRow→1）
                 $（＃领域TBODY TR：最后一个），删除（）;
             。事件preventDefault（）;
         }）;
     }）;     功能filldd（）{
         VAR数据= [
    {ID：'0'，名称：测试0}，
    {ID：1，名称：'测试1'}，
    {ID：'2'，名称：测试2}，
    {ID：'3'，名称：测试3}，
    {ID：'4'，名称：测试4}，
];         对于（i = 0; I＆LT; data.length;我++）{
             $（。myDropDownLisTId）。最后的（）。追加（
            $（'＆LT;选项/＆GT;'，{
                '值'：数据[I] .ID，
                '名'：数据[I] .name和
                文本：数据[我]。名称
            }）
         ）;
         }
     }    ＆LT; / SCRIPT＆GT;


解决方案

请试试这个

HTML 

 ＆LT;表ID =场＆GT;
    ＆LT;＆TBODY GT;
    ＆所述; TR＆GT;
        ＆LT; TD＆GT;交叉信息＆LT;跨度类='民'＆GT; 1 LT; / SPAN＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;输入类型=文本/＆GT;＆LT; / TD＆GT;
        ＆LT; TD＆GT;＆LT;选择类=myDropDownLisTId＆GT; ＆LT;输入类型=文本级=日期选择/＆GT;＆LT; /选择＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT;按钮式=按钮ID =激活addField＆gt;添加场及LT; /按钮＆GT;
＆LT;按钮式=按钮ID =deleteField＆GT;删除字段＆LT; /按钮＆GT;

的jQuery 

  $（文件）。就绪（函数（）{
             filldd（）;
             CreateDP（）;
            VAR rowstring =＆LT; TR＆GT;＆LT; TD类='号'＆GT;交叉信息＆LT; / TD＆GT;＆LT; TD＆GT;＆LT;输入类型='文字'/＆GT;＆LT; / TD＆GT;＆LT; TD＆GT;＆LT;选择类='myDropDownLisTId/＆GT;＆LT;输入类型=文本类='日期选择/＆GT;＆LT; / TD＆GT;＆LT; / TR＆gt;中;
             $（＃激活addField）。点击（函数（事件）{
             $（＃领域TBODY）追加（rowstring）;
             filldd（）;
             CreateDP（）;
             如果（$（TD）。hasClass（数字））{
                 VAR我= parseInt函数（民数记：最后一个。$（）文字（））+ 1;
                 $（$（＆下;跨度类='民'＆gt;中+ I +＆下; /跨度＆gt;中））。appendTo（$（。数））接近的（TD）removeClass移除（'。数'）;
             }
             。事件preventDefault（）;
         }）;         $（＃deleteField）。点击（函数（事件）{
             。VAR lengthRow = $（＃领域TBODY TR）的长度;
             如果（lengthRow→1）
                 $（＃领域TBODY TR：最后一个），删除（）;
             。事件preventDefault（）;
         }）;
}）; 功能filldd（）{
    VAR数据= [
    {ID：'0'，名称：测试0}，
    {ID：1，名称：'测试1'}，
    {ID：'2'，名称：测试2}，
    {ID：'3'，名称：测试3}，
    {ID：'4'，名称：测试4}，
];    对于（i = 0; I＆LT; data.length;我++）{
         $（。myDropDownLisTId）。最后的（）。追加（
            $（'＆LT;选项/＆GT;'，{
                '值'：数据[I] .ID，
                '名'：数据[I] .name和
                文本：数据[我]。名称
            }）
         ）;
     }
         }         功能CreateDP（）{
             $（日期选择器），最后一个（）日期选择器（）。
         }

住在这里演示

I am generating rows with dynamically on button click using Jquery.

FIDDLE: http://jsfiddle.net/a4NSm/2/

The problem now is that I want to add DatePicker to it but I cant because it works with id and not with class.

code:

  <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
     <link type="text/css" href="../demoengine/demoengine.css" rel="stylesheet">
    <script type="text/javascript" src="../demoengine/demoengine.js" async defer></script>
    <title>jQuery UI Datepicker: Parse and Format Dates</title>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>
      $(function () {
          $(".datepicker").datepicker({
              dateFormat: "dd-mm-yy",
              onSelect: function (dateText, inst) {
                  var date = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
                  var dateText1 = $.datepicker.formatDate("D, d M yy", date, inst.settings);
                  date.setDate(date.getDate() + 7);
                  var dateText2 = $.datepicker.formatDate("D, d M yy", date, inst.settings);
                  $("#dateoutput").html("Chosen date is <b>" + dateText1 + "</b>; chosen date + 7 days yields <b>" + dateText2 + "</b>");
              }
          });
      });
  </script>

<table id="field">
    <tbody>
    <tr>
        <td>Alternatif <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><select class="myDropDownLisTId"> <input type="text" id="datepicker" class="datepicker" /></select></td>
    </tr>
    </tbody>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>

JS

 <script type="text/javascript">
     $(document).ready(function () {
         filldd();

         var rowstring = "<tr><td class='number'>Alternatif</td><td><input type='text'/></td><td><select class='myDropDownLisTId'/><input type='text' class='datepicker'/></td></tr>";
         $("#addField").click(function (event) {
             $("#field tbody").append(rowstring);
             filldd();
             if ($("td").hasClass("number")) {
                 var i = parseInt($(".num:last").text()) + 1;
                 $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
             }
             event.preventDefault();
         });

         $("#deleteField").click(function (event) {
             var lengthRow = $("#field tbody tr").length;
             if (lengthRow > 1)
                 $("#field tbody tr:last").remove();
             event.preventDefault();
         });
     });

     function filldd() {
         var data = [
    { id: '0', name: 'test 0' },
    { id: '1', name: 'test 1' },
    { id: '2', name: 'test 2' },
    { id: '3', name: 'test 3' },
    { id: '4', name: 'test 4' },
];

         for (i = 0; i < data.length; i++) {
             $(".myDropDownLisTId").last().append(
            $('<option />', {
                'value': data[i].id,
                'name': data[i].name,
                'text': data[i].name
            })
         );
         }
     }

    </script>

解决方案

Please try this

HTML

<table id="field">
    <tbody>
    <tr>
        <td>Alternatif <span class='num'>1</span></td>
        <td><input type="text" /></td>
        <td><select class="myDropDownLisTId"> <input type="text" class="datepicker" /></select></td>
    </tr>
    </tbody>
</table>
<button type="button" id="addField">Add Field</button>
<button type="button" id="deleteField">Delete Field</button>

jQuery

     $(document).ready(function () {
             filldd();
             CreateDP();
            var rowstring = "<tr><td class='number'>Alternatif</td><td><input type='text'/></td><td><select class='myDropDownLisTId'/><input type='text' class='datepicker'/></td></tr>";
             $("#addField").click(function (event) {
             $("#field tbody").append(rowstring);
             filldd();
             CreateDP();
             if ($("td").hasClass("number")) {
                 var i = parseInt($(".num:last").text()) + 1;
                 $($("<span class='num'> " + i + " </span>")).appendTo($(".number")).closest("td").removeClass('number');
             }
             event.preventDefault();
         });

         $("#deleteField").click(function (event) {
             var lengthRow = $("#field tbody tr").length;
             if (lengthRow > 1)
                 $("#field tbody tr:last").remove();
             event.preventDefault();
         });     
});

 function filldd(){
    var data = [
    { id: '0', name: 'test 0' },
    { id: '1', name: 'test 1' },
    { id: '2', name: 'test 2' },
    { id: '3', name: 'test 3' },
    { id: '4', name: 'test 4' },
];

    for (i = 0; i < data.length; i++) {
         $(".myDropDownLisTId").last().append(
            $('<option />', {
                'value': data[i].id,
                'name': data[i].name,
                'text': data[i].name
            })
         );
     }
         }

         function CreateDP(){
             $(".datepicker").last().datepicker();
         }

Live demo here

这篇关于如何使用Jquery动态生成Calendar控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆