layui动态添加input时绑定date

最新推荐文章于 2025-09-11 02:22:02 发布

原创最新推荐文章于 2025-09-11 02:22:02 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #html

PHP 专栏收录该内容

6 篇文章

订阅专栏

layui动态生成的Input控件，由于id相同，不能绑定新的事件，所以修改了下，网上找了不少资料

直接上代码，循环生成ID,然后再重新渲染就可以了

JS部分

<link rel="stylesheet" href="../../layui/css/layui.css">
<script src="../../layui/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  laydate.render({
    elem: '#date1'
  });

});
layui.use(['element','form','laydate','layer'], function(){
  var form = layui.form
  ,element = layui.element
  ,laydate = layui.laydate
  ,layer   = layui.layer;
});

function CommandConfirm(){
 if(window.confirm("你确定删除此记录吗？")){
   return true;
 }else{
   return false;
 }
}
var rows = 2;
            function addrows() {
                var trElement = document.createElement("tr");
                var td1Element = document.createElement("td");
                var td2Element = document.createElement("td");
                var td3Element = document.createElement("td");
                var td4Element = document.createElement("td");
                 var td5Element = document.createElement("td");
                 var td6Element = document.createElement("td");
             //  td1Element.innerHTML=rows;
             
                td2Element.innerHTML="<input type='text' class='layui-input' id='date"+rows+"' required name='tksj[]' placeholder='退款时间' >";
                td3Element.innerHTML="<select name='tkxm[]'><option value=''  selected><option value='履约保证金'>履约保证金<option value='物业保证金'>物业保证金<option value='质量保证金'>质量保证金<option value='装修保证金'>装修保证金<option value='公共事业保证金'>公共事业保证金<option value='POS机押金'>POS机押金<option value='其他'>其他</select>";
                
                td4Element.innerHTML="<input type='text' class='layui-input' value='' required name='tkje[]' placeholder='退款金额'>";
                td5Element.innerHTML="<input type='text' value='' class='layui-input' name='pbz[]' placeholder='备注'>";
                td6Element.innerHTML="<input type='button' value='删除' class='layui-btn' onclick='delrow(this)'>";
                
           //     trElement.appendChild(td1Element);
                trElement.appendChild(td2Element);
                trElement.appendChild(td3Element);
                trElement.appendChild(td4Element);
                trElement.appendChild(td5Element);
                trElement.appendChild(td6Element);
                
                var tbody = document.getElementById("tb");
                tbody.appendChild(trElement);
                
                
                
                
                layui.use(['form','laydate'], function(){  //此段代码必不可少
                    var form = layui.form
                    ,laydate = layui.laydate;
                    form.render(),
                    laydate.render({
                      elem: '#date' +rows
                    });
          
                    
                });
               rows++;
            }
           
            function delrow(obj){
                //获取按钮所在的行
                btnTrElement = obj.parentNode.parentNode;
                //alert(btnTrElement.nodeName);
                //获取按钮所在的行的上一级也就是TBODY
                tbodyElemement = btnTrElement.parentNode;
                //通过tobody干掉tr
                tbodyElemement.removeChild(btnTrElement);
             rows--;
            }
   
     
     
 
</script>

HTML部份

<table class='layui-table' width='60%' border=1 align=center cellspacing=0px>
    <tr>
            <td>退款时间 <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="addrows()"><i class="layui-icon">&#xe608;</i> 添行</button></td><td>退款项目</td><td>退款金额</td><td>备注</td><td>操作</td>

            </tr>
            <tbody id="tb">
          </tbody>
</tr>

</table>