脚本添加动态不起作用

时间:2017-07-24 02:09:05

标签: javascript html

我的日期时间脚本有问题,如下所示:

function createLabour(){ 
    	var cnt2 = '<tr class="noprint"><td><div class="input-group date form_datetime col-md-5" data-date="2017-05-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"><input class="form-control" style="width: 200px" type="text" name="st_datetime[]" value="" readonly><span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span><span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span></div></td><td><div class="input-group date form_datetime col-md-5" data-date="2017-05-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"><input class="form-control" style="width: 200px" type="text" name="en_datetime[]" value="" readonly><span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span><span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span></div></td>';
        var d2 = document.getElementById('frm2');
    	d2.insertAdjacentHTML('beforeend',cnt2);
    	}
<table class="table table-striped table-bordered table-hover" id="frm2">
  <thead>
    <tr>
      <th><b>Start Date/Time</b></th>
      <th><b>End Date/Time</b></th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td>
    	<div class="input-group date form_datetime col-md-5" data-date="2017-05-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
    		  <input class="form-control" style="width: 200px" type="text" name="en_datetime[]" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    		  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    		</div>
    	</td>
    	<td>
    	  <div class="input-group date form_datetime col-md-5" data-date="2017-05-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
    		  <input class="form-control" style="width: 200px" type="text" name="en_datetime[]" value="" readonly>
          <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    		  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    		 </div>
    	  </td>
       </tr>
     </tbody>
</table>
    </td>
    </tr>
    </tbody>
    <tfoot>
    <tr><td colspan="9"><input type="button" value="Add More" class="noprint" onclick="createLabour()"></td></tr>
</table>

对于第一个表格,它运行良好,而当按下添加更多按钮时,第二个表格将无效。

1 个答案:

答案 0 :(得分:0)

您需要定位<tbody>,而不是<table>。如果您向tbody添加ID并在选择器中使用它,它应该可以正常工作。

此外,您没有第二个表的开始标签。