根据下拉选择填充html表格标题[关闭]答案

【问题标题】：Populate html table headers based upon dropdown selection [closed]根据下拉选择填充html表格标题[关闭]
【发布时间】：2019-01-04 20:08:45
【问题描述】：

我还在学习网络开发。

感谢大家的反馈...

我想从下拉列表中选择月份 (MMMM-YYYY) 并获取 html 表格标题以显示月份 M、上个月 M-1、M-3、M-6、M-11 和 @ 987654327@

换句话说。从下拉列表中，如果我选择 2018 年 6 月

表格标题是：

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>

JS部分如下：

var columnValues = [
   ["June 2018","May 2018", "March 2018", "December 2017", "July 2017", "June 2017"],
   ["May 2018", "April 2018", "February 2018", " November 2017", "June 2017", "May 2017"],
   ["April 2018", "March 2018", " January 2017", "October 2017", "May 2017", "April 2017"]
];

function alterColumn(grp) {
  var sel = document.getElementById('tblBody').getElementsByTagName('td');
  var k = 0;  grp = Number(grp);  
  for (var i=0; i<sel.length; i++) {
    if (sel[i].className == 'alt') { sel[i].innerHTML = columnValues[grp][k]; 
k++; }}}

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

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

保重！

【问题讨论】：

您需要向我们展示您的努力 - Stackoverflow 不提供即用型解决方案
我们需要更多关于如何构建下拉列表、一个示例、如何构建表、一个示例以及您为解决此问题而编写的任何逻辑的更多信息。

标签： javascript jquery html json html-table

【解决方案1】：

有了这个脚本，你应该能够完成你想要的。

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)。然后脚本循环遍历想要的月份并将它们输出到表中，检查它是否应该回到一年。如果您有任何问题，请告诉我。

【讨论】：

【解决方案2】：

您可以为每个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>

【讨论】：