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

如何让表格横向排列

问题

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

解决方案

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢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和颜色移除。