資料輸入埠數展示 table

1:埠數等預設隱藏

 <div class="layui-form-item">
        <label class="layui-form-label">主從裝置</label>
        <div class="layui-input-inline">
            <select id="ParentId" name="ParentId" lay-verify="required" lay-filter="ParentId">
                <
 
option value="">請選擇</option>
                <option value="0">主裝置</option>
                {%foreach (TerminalInfo in  TerminalMasterList) {%}
                <option value="{%TerminalInfo.TerminalID%}">{%TerminalInfo.terminalName%}</option>
                {%}#%}
            
 
</select>
        </div>
    </div>
    <div class="layui-form-item"  style="display:none" id="CommdID">
        <label class="layui-form-label">終端命令</label>
        <div class="layui-input-block">
            <input type="text" name="terminalCMD" value="{%TerminalInfo.terminalCMD%}"
 
  placeholder="終端資訊" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item" style="display:none" id="Portinputid">
        <label class="layui-form-label">埠數</label>
        <div class="layui-input-block">
            <input type="text" name="portcount" id="portcount" placeholder="請輸入埠數"  value="" autocomplete="off" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item" style="display:none"  id = "tbid">
        <label class="layui-form-label">埠型別</label>
        <table>
            <thead>
            <tr>
                <th lay-data="{field:'id', width:80, sort: true}">裝置埠</th>
                <th lay-data="{field:'username', width:80}">埠型別</th>
            </tr>
            </thead>
            <tbody>
            <!--  <tr>
                  <td> <input type="text"    placeholder="請輸入埠數" autocomplete="off" class="layui-input" lay-verify="required"></td>
                  <td> <input type="text"   placeholder="請輸入埠數" autocomplete="off" class="layui-input" lay-verify="required"></td>
              </tr>-->
            </tbody>
        </table>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" onclick="return false" lay-filter="add">立即提交</button>
           <!-- <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>-->
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

2獲取 select 選擇事件 layui formon事件 根據選擇內容 執行顯示還是不顯示

  layui.use(["form"], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;

        form.on('select(ParentId)', function (data) {
            var value=$("#ParentId").val();
            if(value>0)
            {
                $("#Portinputid").show();
                $("#CommdID").show();
            }else
            {
                $("#Portinputid").hide();
                /*  $("#tbid tbody").html("");*/
                $("#tbid").hide();
                $("#CommdID").hide();
            }
    });

2: 獲取輸入框輸入數字事件 ,根據輸入數字在

<tbody> 下畫行
在此沒用layui  , 首先 輸入框id 繫結 ip 變化屬性 還有一種寫法. 獲取輸入內容, 根據數字 for 迴圈畫行   另外name 同名數組方式,後臺會接到相關請求的引數,這樣,就能把陣列內的 name 值取出. php 可以,java 好像也行,在此c#框架下這樣寫也是可以的

<script>
$("#portcount").bind("input propertychang",function(event){
    var portcount = this.value;
    portcount = $.trim(portcount);
    this.value = portcount;
    if(portcount.length == 0){
        layer.tips("數字不能為空！",this,{tips:[1,"#ff5722"]});
        return ;
    }
    //清空table
    $("#tbid tbody").html("");
    /*var count= $("#portcount").val();*/
    var jshtml="";
    for (var i=0;i<portcount;i++)
    {
        var jshtml1=
            '<tr>'
            +' <td><input type="text" name="terminalPort[]" value='+Number(i+1)+' autoComplete="off" className="layui-input"  lay-verify="required"></td>'
            +' <td><input type="text"  name="portType[]"  placeholder="請輸入埠型別" autoComplete="off" className="layui-input" lay-verify="required"></td>'
        +'</tr>'
        jshtml= jshtml1+jshtml;
    }

    $("#tbid tbody").html(jshtml);
    $("#tbid").show();
});

</script>