layui中表格嵌套表格

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

上面那个带颜色的按钮就是可以点击出现再嵌套一个表格的。
这个表格搭建的代码是运用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>

上面就是一点点的代码，这是构不成一张完整的大表格的，这张表格里面也还有一个按钮字段没有写上来。
然后一开始的时候我是这样子直接就绑定点击事件，结果是：

没错，就是服务器报错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中表格嵌套表格相关推荐

c# 获取word表格中的内容_Java 在Word中创建嵌套表格
嵌套表格,即在一个大的表格单元格中再嵌进去一个或几个小的表格,使表格内容布局合理.本文将通过java程序来演示如何在Word中创建嵌套表格. 使用工具:Free Spire.Doc for Java ...
layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...
HTML怎么CSS表格嵌套,CSS＃/ HTML5 Chrome中的嵌套表格和子填充
我正在尝试为我的UI库SlateJS设置一个多面板小部件.基本上,多面板小部件通过多个水平或垂直对齐的面板填充所有可用的空间.每个面板都可以有一个与之关联的工具栏.CSS#/ HTML5 Chrome ...
layui中的动态表格
layui中的动态表格介绍 layui提供了丰富的动态表格的操作,它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求.支持固定表头.固定行.固定列左/列右,支持拖拽改变列 ...
Layui中的数据表格渲染
学习前端代码的朋友们应该都有所闻layui这个框架,这是一款遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用的前端 UI 框架.如果有需要可以通过官网下载得到,使用起来也极其方便 ...
java操作跨页的word cell_Java 创建Word表格/嵌套表格、添加/复制表格行或列、设置表格跨页断行...
概述表格作为一种可视化交流模式及组织整理数据的手段,在各种场合及文档中应用广泛.常见的表格可包含文字.图片等元素,我们操作表格时可以插入图片.写入文字及格式化表格样式等.下面,将通过Java编程在W ...
elementui表格父子表_element-ui中的表格嵌套表格
border :data="tableData"@expand-change="expandChange"v-loading="loading&quo ...
antdesign+vue额外展开行expandedRowRender全部展开，并隐藏expandIcon展开收起按钮；antdesign表格嵌套表格
:defaultExpandAllRows="true" // 默认首次加载表格式全部展开 :expandIconColumnIndex="-1" // exp ...
layui中去掉表格的hover变色
layui中移除表格的hover变色将样式设置为透明色即可解决 .layui-table tbody tr:hover, .layui-table tr, .layui-table-click, . ...

layui中表格嵌套表格

layui中表格嵌套表格相关推荐

最新文章

热门文章