layui中表格嵌套表格

在表格里面再嵌套一个表格,拿到项目看到视频里看见里面的演示,在表格里面还要嵌套一个表格,那时候脑袋一点思路也没有,就是一片空白的,然后就觉得很难,再然后就不管了,先做了再说。
平时的一张表格这些都是可以的了,因为授课老师授课的时候就是一直都是讲一张表格的,但是表格再嵌套一个表格的就从来没有讲过,然后做项目的时候感觉会很难。
不过就算难也要做,而且还可以上网去查,去搜,去了解,再不然就去问老师,总之就是一定要把它给做出来。同桌做的时候也是上网搜的资料信息,搜索如何去做,然后同桌找了一两天还是多于一两天或者少于一两天就没有过多地去注意了,自己先把那些简单的页面搭建完了再说。
过了一段时间,我也做到这里了,就是有一个表格再嵌套一个表格的页面这里。然后我自己在做的时候也思考过一种方法。就是把表格都搭建好,然后给那个点击就会再出现一个表格的按钮一个点击事件,我当时想这应该就可以了吧。
这表格搭建好之后就是这样子:
layui中表格嵌套表格_第1张图片
上面那个带颜色的按钮就是可以点击出现再嵌套一个表格的。
这个表格搭建的代码是运用bootstrap-4.1.3-dist的插件里面的样式来布局的,而且这个布局可以省很多代码。表格部分代码:

 <form class="form-horizontal  row" role="form" id="formInsertStatement" action="InsertStatement" method="post">
       <div class="form-group form-row">
       <label class="col-form-label col-lg-4 px-0" style="margin-top:10px;">委托单号</label>
       <div class="col-lg-8" style="margin-top:10px;">
       <input type="text" class="form-control" id="IEntrustOrderID" name="EntrustOrderNumber" autocomplete="off" /></div>
       <label class="col-form-label col-lg-4 px-0" style="margin-top:10px;">客户简称</label>
       <div class="col-lg-8" style="margin-top:10px;">
       <select class="form-control" id="ICustomerID" name="CustomerID"></select>                                </div>
       <label class="col-form-label col-lg-4 px-0" style="margin-top:10px;">船公司</label>
</div>
</form>

上面就是一点点的代码,这是构不成一张完整的大表格的,这张表格里面也还有一个按钮字段没有写上来。
然后一开始的时候我是这样子直接就绑定点击事件,结果是:
layui中表格嵌套表格_第2张图片
没错,就是服务器报错404,404找不到,然后没办法了,就只能问同桌了。
然后同桌查看我的代码,结果是我写错了。应该把这个type改成reset重置才可以的。

<div class="col-12" style="margin-top: -30px;margin-left: -10px;">
   <button type="reset" class="layui-icon layui-btn layui-icon-add-1" style="background-color:#8c6891;" onclick="MarkRecon()">标记对账button>
div>

就是上面那个黄色标记那里一样,然后点击才可以。
layui中表格嵌套表格_第3张图片
点击之后就可以在表格里面嵌套一个表格了。还挺神奇的,以前没有注意到过,现在为了把这个项目的功能给实现,然后学到挺多东西的,就好比如这个表格嵌套表格这个知识,当然,能学到的不止是这一个,还有很多等着去挖掘。

你可能感兴趣的:(html)