如何让表格横向排列
问题
在点击下标“∨”后生成的第二张日历，会使第一张表格向上移，导致下标“∨”和“确定”遮挡掉一些日期，不美观。解决方法是想让点击“∨”后新生成的表格往右边移动，但没有效果。
解决方案
zuojiankuohaophpcnbutton class='add_cla add_sty'youjiankuohaophpcn∨zuojiankuohaophpcn/buttonyoujiankuohaophpcn zuojiankuohaophpcnbutton class="button_cla button_sty"youjiankuohaophpcn确定zuojiankuohaophpcn/buttonyoujiankuohaophpcn
在表格标题
//获取‘∨’的点击次数
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 zuojiankuohaophpcn 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 zuojiankuohaophpcn $('.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 zuojiankuohaophpcn= $('.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 zuojiankuohaophpcn= $('.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和颜色移除。
