table模板标签，批量多选失效的问题，tr td结构多选框失效相关问题

最新推荐文章于 2022-11-30 11:51:04 发布
最新推荐文章于 2022-11-30 11:51:04 发布
阅读量506 收藏
点赞数
分类专栏： 踩坑经验 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49610478/article/details/109205001
版权

临下班突然来了一个特别着急的BUG。

问题代码如下：

<table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="30">id</th>
                <th width="30">区域</th>
                <th width="60">小区名称</th>
                <th width="90">标题</th>
                <th width="50">户型</th>
                <th width="30">图片数量</th>
                <th width="60">联系人</th>
                <th width="60">对接人</th>
                <th width="60">对接客服</th>
                <th width="60">视频房源</th>
                <th width="30">审核状态</th>
                <th width="30">身份认证</th>
                <th width="30">房本认证</th>
                <th width="30">浏览量</th>
                <th width="60">售价</th>
                <th width="90">备注</th>
                <th width="90">超市物业</th>
                <th width="100">发布时间</th>
                <th width="100">更新时间</th>
                <th width="60">上次审核时间</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="text-c" th:each="list : ${dataList}">
                <input type="hidden" th:id="${list.HouseID}" name="cooperation"
                       th:value="${list.isCooperation+ '_' + list.cooperationId}"/>
                <td><input type="checkbox" class="houseId" th:value="${list.HouseID}" name=""/></td>
                <td th:text="${list.HouseID}"></td>
                <td th:text="${list.regionName}"></td>
                <td th:text="${list.subdistrictName}"></td>
                <td>
                    <a th:text="${list.Title}"
                       th:href="@{'https://sy.fangxiaoer.com/UHouse/sale/view/'+${list.HouseID}}"
                       target="_blank"></a>
                </td>
                <!--<td th:text="${list.Title}"></td>-->
                <td th:text="${list.room+'室'+list.Hall+'厅'+list.Toilet+'卫'}"></td>
                <td th:text="${list.picCount}"></td>
                <td th:if="${#strings.equals(list.memberType, '2')}" th:text="${list.realName}"></td>
                <td th:if="${#strings.equals(list.memberType, '1')}" th:text="${#lists.size(#strings.listSplit(list.HouseOwner,'|')) le 1?list.HouseOwner:((#strings.listSplit(list.HouseOwner,'|')[0])+(#strings.listSplit(list.HouseOwner,'|')[1] eq '1'?'(先生)':'(女士)')) }"></td>
                <td th:text="${list.joinMember}"></td>
                <td th:text="${list.joinCustomerService}"></td>
                <td th:text="${list.houseVideoStatus eq 3 ? '是' :'否'}"></td>
                <th:block th:if="${list.State eq 3}">
                    <td class="td-status"><span class="label label-success radius">审核通过</span></td>
                </th:block>
                <th:block th:if="${list.State eq 1}">
                    <td class="td-status"><span class="label label-danger radius">未审核</span></td>
                </th:block>
                <th:block th:if="${list.State eq 4}">
                    <td class="td-status"><span class="label label-warning radius">审核未通过</span></td>
                </th:block>
                <th:block th:switch="${list.realEstateStatus}">
                    <td  th:case="0" >n/a</td>
                    <td   th:case="2" >未审核</td>
                    <td   th:case="5" >未审核</td>
                    <td   th:case="15">未审核通过</td>
                    <td   th:case="100">审核通过</td>
                </th:block>
                <th:block th:switch="${list.realEstateStatus}">
                    <td  th:case="0" >n/a</td>
                    <td   th:case="2" >n/a</td>
                    <td   th:case="5" >未审核</td>
                    <td   th:case="15">未审核</td>
                    <td   th:case="100">审核通过</td>
                </th:block>
                <td th:text="${list.TotalVisitedNum}"></td>
                <td th:text="${list.SalePrice + '万元'}"></td>
                <td th:text="${list.Remark}"></td>
                <td th:text="${list.pd}"></td>
                <td th:text="${list.addTimeStr}"></td>
                <td th:text="${list.updateTimeStr}"></td>
                <td th:text="${#strings.isEmpty(list.SchoolAreaMID)? '' : list.SchoolAreaMID +'['+list.MiddleSchoolID+']'}"></td>
                <td class="td-manage">
                    <a data-toggle="tooltip" data-placement="top" title="编辑" href="javascript:;"
                       th:onclick="'javascript:edit(\'编辑\',\''+${list.HouseID}+'\',\'update\')'"
                       class="ml-5" style="text-decoration:none">
                        <i class="Hui-iconfont">&#xe6df;</i>
                    </a>
                    <a data-toggle="tooltip" data-placement="top" title="缩略图" href="javascript:;"
                       th:onclick="'javascript:housePicShow(\'缩略图\',\''+${list.HouseID}+'\')'"
                       class="ml-5" style="text-decoration:none">
                        <i class="Hui-iconfont">&#xe646;</i>
                    </a>
                    <a data-toggle="tooltip" data-placement="top" title="刷新" href="javascript:;"
                       th:onclick="'javascript:putSaleHouse(\'刷新\',\''+${list.HouseID}+'\',\'refresh\')'"
                       class="ml-5" style="text-decoration:none">
                        <i class="Hui-iconfont">&#xe606;</i>
                    </a>
                    <th:block th:if="${list.IsDel eq 0}">
                        <a data-toggle="tooltip" data-placement="top" title="删除" href="javascript:;"
                           th:onclick="'javascript:putSaleHouse(\'删除\',\''+${list.HouseID}+'\',\'delete\')'"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </th:block>
                    <th:block th:if="${list.IsDel eq 1}">
                        <a data-toggle="tooltip" data-placement="top" title="恢复" href="javascript:;"
                           th:onclick="'javascript:putSaleHouse(\'恢复\',\''+${list.HouseID}+'\',\'recovery\')'"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe66b;</i>
                        </a>
                    </th:block>
                    <a data-toggle="tooltip" data-placement="top" title="点击状况" href="javascript:;"
                       th:onclick="'javascript:affective(\''+${list.HouseID}+'\')'"
                       class="ml-5" style="text-decoration:none">
                        <i class="Hui-iconfont">&#xe695;</i>
                    </a>
                    <th:block th:if="${list.IsAdHouse eq 0 or list.IsAdHouse eq null}">
                        <a data-toggle="tooltip" data-placement="top" title="设置专题房源" href="javascript:;"
                           th:onclick="'javascript:setAdHouse(\''+${list.HouseID}+'\',\'1\')'"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6a8;</i>
                        </a>
                    </th:block>
                    <th:block th:if="${list.IsAdHouse eq 1}">
                        <a data-toggle="tooltip" data-placement="top" title="取消专题房源" href="javascript:;"
                           th:onclick="'javascript:setAdHouse(\''+${list.HouseID}+'\',\'0\')'"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe631;</i>
                        </a>
                    </th:block>
                    <th:block th:if="${list.realEstateStatus ge 2}">
                        <a data-toggle="tooltip" data-placement="top" title="真房源审核" href="javascript:;"
                           th:onclick="'javascript:checkRealHouse(\''+${list.HouseID}+'\',\'0\')'"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe638;</i>
                        </a>
                    </th:block>
                </td>
            </tr>
            </tbody>
        </table>

出现的问题最终定位在正常的tr td结构中被插入了一个<input type="hidden">标签，这个虽然在明面出现不了任何问题，但是会造成批量选择按钮失效

这种情况下，解决问题的方式就是把input挪到第一个td的下面，或者挪到所有的td后面，这样他就不会打扰tr 对第一个td多选框的批量选择操作了。

以上，问题完美解决

老秃爵
关注
专栏目录
教训：＜td＞标签内的文本内容没有显示，原因和解决方法如下
qq_45863496的博客
11-16 2228
今天设计一个表格的时候，标签内的文本内容没有显示，在网上找了很久都没有找到解决方法，冷静过后，突然想到是不是文本内容已经显示了的，只是被盒子样式覆盖掉了，看不见而已。 于是，我一看字体的样式没有设置，就知道很有可能已经显示了，只是看不见，修改字体样式后文本内容果然显示出来了。难受，这个问题我找了很久的答案，一直以为是标签哪里出的问题。。。 修改前 style { .table-box { width: 900px; height: 150px;
多选框的相关操作，1.全选，取消全选，2.后端获取多选框的数据
jiangleng1的博客
04-07 742
1.jsp代码：           添加规则        上传规则        批量删除        取消删除                                    序号          规则          创建时间          操作
el-table 多选框错乱
ingenuou_的博客
11-30 802
el-table 多选框错乱
IE下 checkbox、radio等标签的label中的img点击无效（点击不能选中）问题解决
dekhjgdfv895375041的博客
03-15 257
类似以下代码，点击图片不能选中checkbox <input id="dw_1" name="shape[]" value="Round" type="checkbox" > <label for="dw_1">Round<br><img src="images/shape/Round.gif" ></label> ...
动态写table时，tr和td消失的问题
DY56的博客
05-13 1224
今天碰到一个table中内容位置不对的bug（不是我写的），熟练地打开F12进行检查，发现原本应该包裹内容的<tr>和<td>标签不见了（下面的<font>外还有一层<tr>和<td>）。 不见了<tr>和<td>导致这些内容不在table内，这使得这部分的内容在页面的位置不对，但是js中确实有写<tr>和<td>（如下图）。 想了一会，突然冒出一个想法，是不是<table&gt
CheckBox 失效，点击的时候没有选上
猫三三
01-23 5266
CheckBox 一般不会出现问题，但今天遇到个 点击的时候没有反映， 仔细检查后发现，checkbox所在的div跟别的div相交了，造成的这种情况。 ----------------------必需是高质量、对别人有帮助的文章
给table的tr添加border-top时没有效果的解决方法
12-09
在网页设计中，我们经常需要对表格（table）进行样式设置，其中，为表格行（tr）添加边框（border）是一种常见的需求。然而，在实际操作中，有时你会发现为`<tr>`元素直接添加`border-top`属性并没有预期的效果，这...
transition-group在table表格中失效的问题
weixin_33811961的博客
04-13 1663
#持续划水中#本文章仅用作于个人学习笔记复制代码划重点 —— 个人笔记！(◔◡◔)参考文章：（墙）Vuejs transition on table rows最终效果图：今天在学习Vue的过渡&动画的时候遇到了一个困扰了一下午的问题。在根据官方文档提供的 列表过渡 中尝试给之前写的一个表格demo中的<tbody>下的<tr>行添加过渡效果的时候发现，过渡并没有...
layui表格 列自动适应大小失效的解决方法
10-16
6. **调试和排查**：如果问题依然存在，可以打开浏览器的开发者工具，查看控制台是否有相关的错误提示，这将帮助你定位问题的具体原因。 总的来说，layui表格列自动适应大小失效的问题，通常可以通过检查CSS样式、...
table 》 tr 设置样式无效? table tr 这样设置才行，why？
codingWeb的博客
06-18 5078
今天碰到的一个问题，之前一直没有注意到，虽然很快找到问题所在了，但感觉有必要记录一下，希望有同样遇到这个问题的小伙伴，但没找到原因的，能看到这篇文章 先来看问题： html如下： 想让 tr变成红色背景 <style type="text/css"> table > tr { background-color: red; } </style> <body> <table border cellspacing="0" cellpaddi
字符串模板${}失效
weixin_30767921的博客
04-23 661
使用字符串模板${}时需要table上面的符号`（反单引号），不是单引号。 console.log(`Server running at http://${hostname}:${port}/`); 转载于:https://www.cnblogs.com/jianghan7/p/10754922.html...
c#使用正则表达式获取TR中的多个TD_一个 Vue 模板可以有多个根节点(Fragments)?
weixin_39741101的博客
11-22 140
如果我们试图创建一个没有根节点的Vue模板，比如这样：<template>我们就会收到编译或运行时错误，因为模板必须具有单个根元素。通常，我们通过在最外层包裹一层 div 来解决这个问题，但这个div元素一般没有啥使用，就是让模板符合单根需求。<template>这样的方式通常问题不在，但是在某些情况下，拥有多根模板是必要的。在本文中，我们来探讨一下何时需要以及如...
使用label失效的原因
weixin_30596023的博客
07-18 1980
1.检查自己的id有没有加参, 否则会出现只有第一个id生效的情况 2.当图片不显示的时候, 你可能需要改变一下label的位置, 尽量别包围input, 最好放在input下面 <input type="checkbox" id="+value.id+"> <label for="+value.id+ "></label> 转载于:h...
jQuery 中 $("tr:eq(1) td:eq(2)") 写法
weixin_30360497的博客
04-15 6955
$("tr:eq(1) td:eq(2)"):这代表了要选中表格的第二行中的第三个单元格 如果在后面再加上.text() 代表要取出这个单元格中的文本。 注意以下三种情况用法 .text() .html() .val() 转载于:https://www.cnblogs.com/renfeija/p/6713603.html...
Thymeleaf 迭代,if,switch语法
zhouzhiwengang的专栏
05-13 2812
1、Thymeleaf目标 迭代语法：th:each; iteration status 条件语法：th:if; th:unless switch语法：th:switch; th:case; * 2、公共模拟SpringBoot 后台接口 后台逻辑（action） // 分页查询 @RequestMapping("/allColumnValidates") public Stri...
记录一次 element - table 多选框 toggleRowSelection 无效 的解决办法
bei199133的博客
03-25 2515
记录一次 element - table 多选框 toggleRowSelection 无效 的解决办法
使用thymeleaf中超链接失效
麻辣香蕉
07-11 2734
使用thymeleaf的时候遇到超链接失效的错误，在网上搜了好久没找到原因，一点点排错找出，记录一下！错误代码：&lt;tr th:each="view_dir : ${view_dir}"&gt;     &lt;td th:text="${view_dir.view_current_dir}"&gt; &lt;a th:href="@{http://localhost:8080/list(d...
thymeleaf的引用失效问题
qq_37358381的博客
04-27 3370
thymeleaf的引用失效问题**问题源码**解决方法 最近在自学Sringboot web开发，用到 thymeleaf 引用静态路径下的html文件时，使用demo 测试，总是返回return 中的 字符串，没有和templates文件夹下的html文件关联，付下demo控制器的代码、html文件： 问题源码 Controller类： @RestController public class...
el-table不含多选框多选选中行高亮
最新发布
06-06
而多选框则可以通过el-table-column中的type属性指定为selection来添加。具体实现可以参考以下代码： ``` <el-table :data="tableData" highlight-current-row> <el-table-column type="selection"></el-table-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值