Question

我仍在学习网络开发人员。

谢谢大家的反馈...

我想从下拉列表中选择一个月(MMMM-YYYY)，并获取html表格标题以显示该月M，最后一个月M-1，M-3，{ {1}}，M-6和M-11

换句话说。如果从下拉菜单中选择了 2018年6月

表格标题为：

M-12

我尝试按行解决问题（我刚刚开始学习JS），并且我坚持如何翻转它。
```
June 2018 | May 2018 | March 2018 | December 2017 | July 2017 | June 2017
```
JS部分在下面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> Untitled </title>
<style type="text/css">
</style>

</head>
<body>
    <form onsubmit="return false">

    <span class="bgthead" >
     <select name="features" onchange="alterColumn(this.selectedIndex)">
       <option value="1">June 2018</option>
       <option value="2">May 2018</option>
       <option value="3">April 2018</option>
     </select>
    </span>

    <table>
     <thead>
       <tr>
       </tr>
     </thead>
     <tbody id="tblBody">
       <tr>
         <td class="alt">June 2018</td>
       </tr>
       <tr>
         <td class="alt">May 2018</td>
       </tr>
       <tr>
         <td class="alt">March 2018</td>
       </tr>
       <tr>
         <td class="alt">December 2017</td>
       </tr>
       <tr>
         <td class="alt">July 2017</td>
       </tr>
       <tr>
         <td class="alt">June 2017</td>
       </tr>
        </tbody>
      </table>
     </form>

目标是创建一个html表，其中包含单元格，这些单元格填充了使用php从数据库中获取的数据。 表格单元格中的数据根据标题中显示的月份而变化。
可以使用数据库表中的month列构建下拉列表。
我唯一的问题是/是否是使用下拉列表的动态表头部分...

再次感谢您的反馈，更正...我正在学习...我正在成长。

保重！

Answer 1

您可以为每个select选项赋予一个值，该值反映月份和年份，并在其之间可以有一个空格，可以在其中分割字符串。然后，您可以使用月和年创建新的Date对象，并在每次重新创建Date对象之后，从中减去所需的月数。

showChange();

function showChange() {
  var date = document.getElementById('dates').value;
  var split = date.split(' ');
  date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
  var month = date.getMonth();
  document.getElementById("1").textContent = formatDate(date);
  date.setMonth(month - 1);
  document.getElementById("2").textContent = formatDate(date);
  date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
  date.setMonth(month - 3);
  document.getElementById("3").textContent = formatDate(date);
  date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
  date.setMonth(month - 6);
  document.getElementById("4").textContent = formatDate(date);
  date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
  date.setMonth(month - 11);
  document.getElementById("5").textContent = formatDate(date);
  date = new Date(split[1], parseInt(split[0]) - 1, 17, 0, 0, 0, 0);
  date.setFullYear(date.getFullYear() - 1);
  document.getElementById("6").textContent = formatDate(date);
}

function formatDate(date) {
  const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];
  return monthNames[date.getMonth()] + " " + date.getFullYear();
}

<select onchange="showChange()" id="dates">
  <option value="6 2018">June 2018</option>
  <option value="5 2018">May 2018</option>
  <option value="4 2018">April 2018</option>
</select>
<p/>
<table id="date">
  <tr>
    <th id="1"></th>
    <th id="2"></th>
    <th id="3"></th>
    <th id="4"></th>
    <th id="5"></th>
    <th id="6"></th>
  </tr>
</table>

Answer 2

使用此脚本，您应该能够完成所需的操作。

var table = document.getElementsByTagName('td');
    
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var selectedDate = 'June 2018'; //Selected month from dropdown
var selectedMonth = selectedDate.split(' ')[0]; //Get the data before the frist ' '
var selectedYear = selectedDate.split(' ')[1]; //Get the data after the frist ' '
var wantedMonths = [0, -1, -3, -6, -11, -12]; //List of the month you want

var monthNumber = months.indexOf(selectedMonth); //Returns the month number - 1 (arrays start at 0)
monthNumber++ //True month number

for (i = 0; i < wantedMonths.length; i++) { //Display each month
    if (monthNumber + wantedMonths[i] > 0) { //Check if we'll have to go back a year
        table[i].innerHTML =  months[monthNumber + wantedMonths[i] - 1] + ' ' + selectedYear; //Ouput the month and year
    } else { //Not in the same year
        table[i].innerHTML =  months[(monthNumber + 12) + wantedMonths[i] - 1] + ' ' + (selectedYear - 1); //Taking year, giving 12 months
    }
}

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

JS说明，首先我选择了整个表（table），您可能只想选择该行。然后是整个脚本使用的月份列表（months）。之后，便是下拉菜单（selectectedDate）中的数据（为了简化起见，我在JS中进行了定义）。然后，我按空格分开，分别用单独的变量（selectedMonth和selectedYear）给我月份和年份。然后，要输出的月份列表与所选月份重复（wantedMonths）。然后，我使用月份数组获得月份编号（monthNumber）。然后，脚本循环遍历所需的月份并将其输出到表中，以检查是否应追溯到一年之前。如果您有任何问题，请通知我。

根据下拉选择来填充html表标题

2 个答案: