Question

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

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

现在的问题是我想向它添加DatePicker但我不能因为它适用于id而不是类。

码

  <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>

Answer 1

请试试这个

<强> 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动态生成日历控件？

1 个答案: