layui table的＜td＞内加入select标签不显示的问题

最新推荐文章于 2025-02-20 09:24:50 发布

原创最新推荐文章于 2025-02-20 09:24:50 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

spring mvc 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个常见的前端开发问题：select标签在table中默认隐藏，导致无法正常显示。通过添加特定的CSS样式，可以轻松解决这个问题，确保select元素在网页上的正确显示。

在表格中加入select标签发现一直都不显示在网上看了好多方法发现都不行，最后看下才发现select在table中居然是隐藏的。于是在当前的jsp或者html页面加入如下样式即可解决问题。

.layui-form input[type=radio], .layui-form select {
    display: block;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

芝麻棍儿

关注关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

layui 动态插入select没有效果

二月的博客

05-23

687

对于动态插入select ，form 模块的自动化渲染是失效的，需要执行 form.render(type, filter); 第一个参数：type，为表单的 type 类型第二个参数：filter，为 class="layui-form" 所在元素的 lay-filter="" 的值。可以借助该参数，对表单完成局部更新 ...

Layui select在table表格中无法正常显示的问题

qq_42782011的博客

04-14

474

选项没有正确展示，被遮住了。

参与评论您还未登录，请先登录后发表或查看评论

layui ，select 事件失效处理

ws - 兮的博客空间

04-01

3677

select 标签上添加 lay-filter="test" 如下： <select lay-filter="test" class="type" style="width:200px;height: 30px"> <option th:each="type:${types}" th:value="${type}" th:text=...

layui table 行内下拉框select不显示的解决办法（进一步优化）

ylens的博客

05-16

1832

之前写过一个文章：layui table 行内下拉框select不显示的解决办法。地址：https://blog.youkuaiyun.com/ylens/article/details/136075856，在使用过程中发现下拉框显示不完整。

layui table 行内下拉框select不显示的解决办法

ylens的博客

02-08

1589

经查找，终于知道，只需要更改CSS样式就可以解决问题。

select采坑事件，选中不显示

wanghaoran_whr的博客

11-30

928

select采坑事件，选中不显示

layui下拉选择框select不显示或没有效果

极客神殿

07-14

2337

Layui弹层layer中select没CSS样式或渲染失效的解决方法。

layui table设置td select

weixin_30443731的博客

03-03

756

layui table设置td select的时候，必须先设置样式 .layui-table-cell { overflow: visible !important;} .layui-table-box { overflow: visible; } .layui-table-body { overflow: visible; }上面三个样式必须设置，不然显示的时候会有问题 ...

最新发布

07-04

'<spanclass="layui-btn layui-btn-normal layui-btn-mini" onclick="admin_stop(this,\'' +admin.id+ '\',0)">启用</span>':'<spanclass="layui-btn layui-btn-danger layui-btn-mini" onclick="admin_stop(this,\'...

本关任务：使用Django的模型完成用户信息的数据展示功能。from django.db import models # Create your models here. class UserInfo(models.Model): # ********** Begin ********** # # ********** End ********** 第二部分#from django.shortcuts import render from app import models # Create your views here. def index(request): # ********** Begin ********** # # ********** End ********** #"""step1 URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/2.0/topics/http/urls/ Examples: Function views 1. Add an import: from my_app import views 2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views 1. Add an import: from other_app.views import Home 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf 1. Import the include() function: from django.urls import include, path 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.contrib import admin from django.urls import path from app import views urlpatterns = [ path('admin/', admin.site.urls), # ********** Begin ********** # # ********** End ********** # ] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Django 模型</title> <link rel="stylesheet" href="/static/layui/css/layui.css"> <script src="/static/layui/layui.all.js"></script> <script src="/static/layui/jquery-3.1.1.min.js"></script> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <blockquote class="layui-elem-quote layui-quote-nm">用户信息</blockquote> </div> <div class="layui-col-md12"> <table class="layui-table"> <colgroup> <col width="100"> <col width="100"> <col width="100"> <col> </colgroup> <thead> <tr> <th>编号</th> <th>用户名</th> <th>性别</th> <th>签名</th> </tr> </thead> <tbody>  <tr> <td>id</td> <td>用户名</td> <td>性别</td> <td>签名</td> </tr>  </tbody> </table> </div> </div> </div> </body> </html>补充代码

05-31

<td>{{ profile.registration_date|date:"Y-m-d H:i" }}</td> </tr> {% endfor %} </tbody> </table> ``` #### 4. 配置URL路由 ```python # urls.py from django.urls import path from .views import user_...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../static/js/jquery-2.1.3.js"></script> <script src="../static/layui/layui-v2.6.8/layui/layui.js"></script> <link rel="stylesheet" href="../static/layui/layui-v2.6.8/layui/css/layui.css"> <style> table{ width: 80%; text-align: center; margin-left: 10%; margin-top: 30px; } </style> </head> <body> <table border="1" rules="all" class="layui-table layui-table-hover"> <tr> <td>订单号</td> <td>电影名称</td> <td>座位选择</td> <td>时间</td> <td>金额</td> <td>状态</td> <td>操作</td> </tr> <tbody id="tb"> </tbody> </table> <script> var layer = layui.layer; layer.msg("数据已更新") selectOrder(); function selectOrder(){ let uid=window.location.href.split("?")[1].split("=")[1]; $.get("/pay/getOrderList",{userId:uid},(data)=>{ console.log(data); let html=""; for (let i = 0; i < data.length; i++) { //根据状态判断按钮 let state=data[i].state; let cz; if (state==2){ cz=`<a href="Movie.html"><input type="button" class='layui-btn layui-btn-primary' value="去看电影"></a>`; }else if (state==0){ cz=`<input type="button" class='layui-btn' value="取票"/>\`<input type="button" onclick="pay(${state})" class='layui-btn layui-btn-danger' value="退款"/>`; }else if (state==1){ cz=`<input type="button" onclick="pay(${state})" class='layui-btn layui-btn-normal wfk' value="去付款">` }else if (state==3){ cz=`<a href="Movie.html"><input type="button" class='layui-btn layui-btn-primary' value="重新买票"></a>`; } //显示座位 let s=""; let seat=data[i].seat; let seat1=seat.substring(1,seat.indexOf("]")).split(','); for (let j = 0; j < seat1.length; j++) { let seat2=seat1[j].split("_"); s+=`${seat2[0]}排${seat2[1]}座`; if (j!=seat1.length-1){ s+="、"; } } html=`<tr> <td>${data[i].orderNumber}</td> <td>${data[i].name}</td> <td>${s}</td> <td>${new Date(data[i].creatTime).toLocaleString()}</td> <td>${data[i].amount}</td> <td>${state==1 ? "未付款":(state==0? "已付款":(state==2? "已退款":"订单超时"))}</td> <td> ${cz} </td> </tr>` $("#tb").append(html); } }) setInterval(selectTime,1000); } function selectTime(){ $(".wfk").each(function (index,element){ let createTime=new Date($(this).parent().prev().prev().prev().html()); let date=getCST(createTime.setMinutes(createTime.getMinutes()+10))-getCST(new Date()) $(this).parent().prev().html(msToTime(date)) $(this).parent().prev().attr("style","color:red") if (date<0){ // window.location.reload(); // 只更新当前行的状态为“订单超时” $(this).parent().prev().html("订单超时"); $(this).remove(); // 移除按钮 } }) } function msToTime(milliseconds) { var hours = Math.floor(milliseconds / 3600000); var minutes = Math.floor((milliseconds % 3600000) / 60000); var seconds = Math.floor(((milliseconds % 3600000) % 60000) / 1000); // 如果小时数大于0，则返回"HH:MM:SS"格式，否则返回"MM:SS"格式 return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); } function getCST(timeString) { const cstOffset = new Date().getTimezoneOffset() * 60000; // 获取本地时区和UTC的偏移量，单位为毫秒 return new Date(timeString).getTime() + cstOffset; // 将时间字符串转换为CST的毫秒时间戳 } function pay(state){ let orderNumber=event.target.parentNode.parentNode.children[0].innerText; let dona_money=event.target.parentNode.parentNode.children[4].innerText; //如果点击的是未付款，点击后，调用支付接口 if (state==0){ window.location.href = "http://localhost:8080/pay/newAlipay?dona_money="+dona_money+"&orderNumber="+orderNumber; }else if (state==1){ window.location.href = "http://localhost:8080/pay/refund?dona_money="+dona_money+"&orderNumber="+orderNumber; } } </script> </body> </html>

07-03

<table class="layui-table" id="orderTable"> <thead> <tr> <th>订单编号</th> <th>创建时间</th> <th>订单状态</th> <th>倒计时</th> <th>操作</th> </tr> </thead> <tbody>  </...

layui table控件实现二级联动 (部门人员联动)

qq_42221810的博客

02-20

847

请选择人员

layui table select 数据表格处理select或其他下拉组件不显示的问题

Rella的博客

10-08

823

layui table select 数据表格处理select或其他下拉组件不显示的问题

a标签放在td里没效果_《HTML常用标签》

weixin_29765215的博客

12-22

1444

a 标签href 链接<a href = "//google.com"></a> //gogle.com 将自动识别协议（推荐链接写法）<a href = "/index.html"></a> 路径：http-server在哪开启服务哪里就是根目录<a href = "javascript:;">xxx</a>...

求解layui数据表格中加入select下拉，表格重载后select下拉不更新

hereweshao的博客

02-02

875

因为涉及到下拉后请求，在form.on中直接获取当前行对象进行其他项赋值，为了实现实时展示得对数据表格进行layui.table.reload重载，但是重载后发现，代码中select的option默认值已经更新，初始效果select也有值，但是当再次点击select下拉好像被刷新一样变成了空值，不选择就不置空，感觉像是数据表格重载后select并未进行重载效果。{field: 'aaa',title: '票据类型', align:'left',width: 150,templet:(e)=>{

layUI 使用select选择框无法显示出样式，看不到、等解决方案

qq_35096805的博客

03-09

4309

我们在写layui代码时候可能遇到这样的问题，明明代码都是从layui官网上复制下来的，却还是会看不到相应的元素。就比如我昨天遇到的一个BUG 代码如上，但是页面上却没有显示出选择框选择框这里却依然没有结果出现。这个问题困扰了我几个小时，最后还是通过看了很久的layui官网得到解决。原因如下这个原因是因为我们没有导入layui的form模块下面这句代码就可以解决 layui.use("form", function () { }) 这句话就是引入layui的form

layui table数据表格处理select或其他下拉组件不显示的问题

04-13

7896

//列的自定义模板 select 。。这里也可以是列的下拉操作按钮 <script type="text/html" id="titleTpl"> <select name="city" lay-verify="required"> <option value=""></option> <o...

【前端 layui问题解决】下拉框select联动被table遮挡