首页 > web前端 > css教程 > 正文

如何解决点击“∨”生成第二张日历后,第一张表格被遮挡的问题?

霞舞
发布: 2024-11-12 08:12:17
原创
443人浏览过

如何解决点击“∨”生成第二张日历后,第一张表格被遮挡的问题?

如何让表格横向排列

问题

在点击下标“∨”后生成的第二张日历,会使第一张表格向上移,导致下标“∨”和“确定”遮挡掉一些日期,不美观。解决方法是想让点击“∨”后新生成的表格往右边移动,但没有效果。

解决方案

AI社交封面生成器
AI社交封面生成器

一句话/一张图一键智能生成社交媒体图片的AI设计神器

AI社交封面生成器 30
查看详情 AI社交封面生成器
<button class='add_cla add_sty'>∨</button>
<button class="button_cla button_sty">确定</button>
登录后复制

在表格标题<tr>内添加两个button按钮:分别为“∨”和“确定”。

    //获取‘∨’的点击次数
    var click_xia = 0; //点击‘∨’的次数
    $('.add_cla').on('click', function () {
        click_xia++;
        if (click_xia == 1) {
            draw(month_now + 2)
        }
        if (click_xia % 2 == 1) {
            $('.table_cla').css('color', 'black');
            $('.title_cla').css('background', '#ccc');

            var td_ele2 = $('.td_event2')// 获取class
            console.log(td_ele2);
            //为td‘点击’添加样式
            td_ele2.click(function () {
                $(this).addclass("dash_border")
                date_value = $(this).text() //储存日期的值
            });

            //为每个td2日期添加点击事件
            for (var i = 0; i < td_ele2.length; i++) {
                // console.log(td_ele[i].innertext);
                td_ele2[i].onclick = getnum(td_ele2[i], function (click_numm, date_numm) {
                    if (click_numm % 2 == 0) {
                        // console.log("点击了偶数次")
                        $(date_numm).removeclass('dash_border');
                        $(date_numm).css("color", "black");
                    } else {
                        // console.log("点击了奇数次")
                        $(date_numm).css("color", "pink");
                    }
                });
            }
        }
        $('.table_cla').fadetoggle(); //淡出
    }
    )
登录后复制

在获取点击次数部分,点击“∨”次数为奇数次时生成表格,然后再根据点击次数进行奇偶判断:偶数次时移除边框样式和颜色;奇数次时添加边框样式及颜色。

         //为每个按钮添加点击事件
    for (var i = 0; i < $('.button_cla').length; i++) {
        // console.log($('.button_cla').html);
        $('.button_cla')[i].onclick = getNum($('.button_cla')[i], function (click_numm, date_numm) {
            //监测存在几个"dash_border"样式的td
            for (var i = 1; i <= $('.td_event').length; i++) {
                console.log(i);
                console.log($('.td_event')[i - 1]); //别问,问就是能跑就行。
                //解决遍历td的id
                if ($('#td_id' + i).hasClass('dash_border')) {
                    console.log('日期' + i + '存在样式dash_border');
                    $('#td_id' + i).removeClass('dash_border')
                    $('#td_id' + i).css('color', 'black');
                } else {
                    console.log('日期' + i + "不存在样式")
                }
            }
            for (var i = 1; i <= $('.td_event2').length; i++) {
                console.log(i);
                console.log($('.td_event2')[i - 1]); //别问,问就是能跑就行。
                //解决遍历td的id
                if ($('#td_id' +sign2+ i).hasClass('dash_border')) {
                    console.log(sign2+'日期' + i + '存在样式dash_border');
                    $('#td_id'  +sign2+ i).removeClass('dash_border')
                    $('#td_id' +sign2 + i).css('color', 'black');
                } else {
                    console.log(sign2+'日期' + i + "不存在样式")
                }
            }
        });
    }
登录后复制

添加右侧表格对象('.table_cla')的淡出淡入效果,点击“确定”将所有dash_border和颜色移除。

以上就是如何解决点击“∨”生成第二张日历后,第一张表格被遮挡的问题?的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号