Ense 2018-11-13 08:34 采纳率: 33.3%
浏览 344

h5页面拖动table时复选框checked会重叠的问题

先看页面
图片说明

只显示10条数据，右边不出现滚动条，勾选正常

当选择显示20条数据时：
图片说明

此时滚动条没有滚动过，左边的勾选框checked勾选正常

当滚动滚动条时，此时异常就出现了：
图片说明

鼠标放置的地方却根据滚动距离往上移动了，可能是滚动条滚动了。但是checkedbox复选框却没有跟着一起滚动，下面贴代码：
图片说明

这是复选框的代码，是根据foreach中的List的数量自动循环的复选框，下面贴整个table的代码：
![图片说明!

图2

图片说明

图3

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-07 08:03
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    这个问题涉及到JavaScript和HTML的复杂性，以及如何处理表格中复选框的状态变化。要解决这个问题，我们可以使用事件监听器来追踪复选框的状态变化，并在滚动条滚动时更新复选框的状态。

    首先，在HTML中创建复选框和表格：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Checkbox and Scroll</title>
    <style>
        tr td {
            width: 30px;
        }
    </style>
</head>
<body>
    <div id="scrollableArea"></div>

    <!-- JavaScript code -->
    <script>
        function handleScroll() {
            // 获取所有复选框
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            
            // 遍历每个复选框
            for (const checkbox of checkboxes) {
                // 当复选框被选中或取消选中时，触发事件
                if (checkbox.checked) {
                    console.log("Checkbox is checked");
                } else {
                    console.log("Checkbox is unchecked");
                }
            }
        }

        window.addEventListener("scroll", handleScroll);
    </script>
</body>
</html>

    在这个示例中，我们使用JavaScript来跟踪复选框的状态变化，并在滚动条滚动时更新这些状态。当复选框被选中或取消选中时，我们打印出相应的消息。

    请注意，这只是一个基本的例子，实际应用中可能需要更复杂的逻辑来处理复选框的状态变化。例如，你可能需要处理多个复选框或者复选框组，或者处理不同的状态改变情况等。

    评论

报告相同问题？

  • 2023Web前端开发八股文&面试题（万字系列）——这篇就够了！
    2023-09-01 00:32
    卡皮巴拉的博客 2023Web前端开发面试题&八股文万字长篇，涵盖html、css、javascript、浏览器相关、网络传输、算法、Vue、React、打包工具……
  • Web前端学习笔记
    2022-10-16 07:27
    DAOkonglong的博客 Web前端学习
  • HTML+CSS学习笔记（pink老师前端课程笔记--补档）
    2021-10-31 23:30
    Tiimmi丶的博客 H5C3提高->项目拼优购电商网站 仅更新到H5C3提高的C3提高部分（新增选择器），忙于其他事情，暂不继续更新 文章目录HTML1. HTML标签2. HTML基本结构标签3. 网页开发工具4. 标签语义5. 特殊字符6. 表格标签7. ...
  • 前端300道常见面试题，前端找工作必备
    2021-12-15 21:06
    编程ID的博客 前端面试题汇总 一、HTML 和 CSS 1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? IE: trident 内核Firefox：gecko 内核Safari:webkit 内核 Opera:以前是 presto 内核，Opera 现已改用 Google Chrome...
  • 【前端收藏】前端小作文-前端八股文知识总结（超万字超详细）持续更新
    2024-02-04 16:20
    天天打码的博客 渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），...浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
  • 前端面试题（HTML、JS、Vue、React、小程序）
    2021-11-05 10:35
    T_Donna的博客 CSS31、盒子模型 ****2、弹性布局、浮动布局、table布局 *****3、flex的属性 ****4、CSS3的新特性 *** （动画效果）5、CSS3选择器优先级及计算 ***6、清除浮动 ***7、position的相关属性 **JS原生*****
  • 重温前端基础（一） HTML、CSS、H5C3
    2020-10-10 10:39
    ←か淡定☆ ヾ的博客 HTML1.1 HTML概念1.2 超文本含义1.3 页面语言1.4 字符集1.5 标签语义化1.6 常用标签1.7 图像标签 img1.8 链接标签1.9 锚点定位 0. WEB 标准构成 构成： 主要包括结构（Structure）、表现（Presentation）和行为...
  • 前端面试题 问题以及答案
    2018-07-06 16:06
    morethanilove的博客 新的行业标准， 框架， 库都不断在更新和新增，正如赫门在2015深JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。...
  • 前端面试 - css+html常考知识点总结
    2024-04-22 04:03
    2401_84152092的博客 此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效(2) 内联块级元素水平居中通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素...
  • 前端学习.
    2021-11-15 18:18
    qq_53323012的博客 html5基础，css3基础，h5c3提高，练习项目。 网页简介 1.html html指的是超文本标记语言，它是用来描述网页的一种语言。 html不是一种编辑语言，而是一种标记语言。 标记语言是一套标记标签。 所谓超文本，有层含义...
  • 前端面试题
    2019-08-08 11:49
    缒幕的博客 前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式...
  • 前端学习笔记 - HTML+CSS
    2021-10-07 23:16
    茗0309的博客 为什么需要 Web 标准 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异 遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点： 1.让 Web 的发展前景更广阔。 2.内容能被更...
  • 前端开发面试题
    2017-08-10 08:59
    小东西儿的博客 前言只看问题点这里 本文收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的...
  • 前端面试题总结（自用）
    2022-05-18 14:30
    你没有天线吗？的博客 如果页面背景有少许改动，一般就要改这张合并的图片 2.17 css盒子的margin中的合并和塌陷问题如何解决 外边距塌陷: 当嵌套的两个块元素,给子盒子加向上的外边距时, 父盒子会跟着掉下来,此时就是外边距塌陷....
  • 前端高频面试题汇总(css,html)
    2022-01-03 18:31
    前端 贾公子的博客 H5 的新特性有哪些？C3 的新特性有哪些？ H5 新特性 1、拖拽释放(Drap and drop) API ondrop 2、自定义属性 data-id 3.语义化更好的内容标签(header,nav,footer ,aside, article, section) 4、音频 ,视频...
  • 最全面、最详细web前端面试题及答案总结
    2021-02-01 09:34
    赫兹/Herzz的博客 2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太...
  • 前端面试-基础篇
    2020-02-02 09:35
    GarfieldEr007的博客 #1 前端需要注意哪些SEO 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度...
  • 前端面试问题答案汇总--基础版
    2019-10-08 06:52
    aikok0033的博客 第一部分：基础篇 一、HTML、HTTP、web综合...1 前端需要注意哪些SEO 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页...
  • HTML5 + CSS3面试题整理
    2022-04-27 22:19
    大前端世界的博客 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签（header,nav,footer,aside,article,section） 3. 音频、视频API(audio,video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 ...
  • 没有解决我的问题, 去提问