如何让表格横向排列

问题

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

解决方案

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<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和颜色移除。