如何解决JavaScript+jQuery日历中导航按钮重叠的colspan布局问题

我用JavaScript和jQuery开发日历，遇到导航按钮布局问题：当前「上一月」「下一月」箭头按钮在日历左侧上下重叠，想把它们分别放在日历两端，但作为初学者找不到问题根源。

原代码片段：

//Generate tabular calendar
var table = $("<table>");
var tableRow = $("<tr>");
var tableCell = $("<td>");

// Create a Button
var prevMonth = $("<button>");
prevMonth.attr("value","Previous Month").text("<<");
prevMonth.click(function() { // Function for clicking previous month button
  cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth() - 1)));
}); 
tableCell.append(prevMonth);
tableRow.append(tableCell);

let tableCellColSpan = $("<td>"); // Spacing out the nav buttons
tableCellColSpan.attr("colspan","5"); // I think the issue is here somewhere 
tableCell.append(tableCellColSpan);

// Create Button + Button Event Handler
nextMonth = $("<button>");
nextMonth.attr("value","Next Month").text(">>");
nextMonth.click(nextNav); 
function nextNav() { // Function for clicking next month button
cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth() + 1)));
};
tableCell.append(nextMonth);
tableRow.append(tableCell);
table.append(tableRow); 

当前按钮效果：

问题根源 #

你把所有元素（左按钮、中间占位单元格、右按钮）都塞进了同一个<td>，还重复将这个tableCell添加到tableRow两次，导致所有内容挤在一个单元格里，自然出现上下重叠的情况。

修改后的代码 #

//Generate tabular calendar
var table = $("<table>");
var tableRow = $("<tr>");

// 左按钮单元格
var prevCell = $("<td>");
var prevMonth = $("<button>");
prevMonth.attr("value","Previous Month").text("<<");
prevMonth.click(function() {
  cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth() - 1)));
}); 
prevCell.append(prevMonth);
tableRow.append(prevCell);

// 中间占位单元格（占满剩余列宽）
let middleCell = $("<td>");
middleCell.attr("colspan","5");
tableRow.append(middleCell);

// 右按钮单元格
var nextCell = $("<td>");
nextMonth = $("<button>");
nextMonth.attr("value","Next Month").text(">>");
nextMonth.click(nextNav); 
function nextNav() {
cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth() + 1)));
};
nextCell.append(nextMonth);
tableRow.append(nextCell);

table.append(tableRow); 

关键修改点 #

• 为左按钮、中间占位、右按钮分别创建独立的<td>元素，避免复用同一个单元格导致内容堆叠
• 中间的<td>单独添加到行中，不再嵌套到左按钮的单元格里
• 右按钮放在专属的<td>中，添加到行的末尾，自然显示在日历右侧

内容的提问来源于stack exchange，提问作者ronniequeen