js调用layui动态生成input绑定日期方式

pengxuanlan · 发表于 2021-10-13 09:24

本帖最后由 pengxuanlan 于 2021-10-13 10:27 编辑

最近做个东西，要添加行，Input 要输入日期，就想绑定下，生成的ID都一样，所以没法绑定，在网上找了一圈代码，改了下，上代码，最简单的

[JavaScript] 纯文本查看 复制代码

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");
                 var td7Element = document.createElement("td");
             //  td1Element.innerHTML=rows;
                td2Element.innerHTML="<input type='text' class='layui-input' id='date"+rows+"' required name='tksj[]' placeholder='退款时间' >";   //拼接rows 来变更id
                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='je2[]' placeholder='应退金额'>";
                td5Element.innerHTML="<input type='text' class='layui-input' value=''  name='tkje[]' placeholder='实退金额'>";
                td6Element.innerHTML="<input type='text' value='' class='layui-input' name='pbz[]' placeholder='备注'>";
                td7Element.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);
                trElement.appendChild(td7Element);
                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    //重新渲染，也按拼接后的id
                    });
                });
                rows++;
            }
           
            function delrow(obj){
                //获取按钮所在的行
                btnTrElement = obj.parentNode.parentNode;
                //alert(btnTrElement.nodeName);
                //获取按钮所在的行的上一级也就是TBODY
                tbodyElemement = btnTrElement.parentNode;
                //通过tobody干掉tr
                tbodyElemement.removeChild(btnTrElement);
             rows--;
            }

html调用代码

[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"><i class="layui-icon"></i> 添行</button></td><td>退款项目</td><td>应退金额</td><td>退款金额</td><td>备注</td><td>操作</td>

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

</tbody>
</tr>
</table>

xiaoxinbsu · 发表于 2021-10-13 09:54

这个好像和php没什么关联吧

pengxuanlan · 发表于 2021-10-13 10:28

xiaoxinbsu 发表于 2021-10-13 09:54
这个好像和php没什么关联吧

好像是没有，PHP代码我都没粘贴过来，

hualonghongyan · 发表于 2021-10-13 11:54

网上有demo，直接粘贴，尽量少自己写代码，因为你写的容易出错，多粘贴别人写好的

ytw6176 · 发表于 2021-10-13 13:42

感谢分享，我也喜欢自己造轮子

主要是需求千奇百怪

muyu1314520 · 发表于 2021-10-13 14:19

new Date

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] js调用layui动态生成input绑定日期方式

免费评分