根据下拉选择填充html表格标题
根据下拉选择填充html表格标题
提问于 2018-07-28 00:51:29
我还在学习web dev。
感谢你们的反馈……
我想从下拉列表中选择一个月份
(MMMM-YYYY)，并获取html表格标题以显示月份M、上个月M-1、M-3、M-6、M-11和M-12
换句话说。从下拉列表中，如果我选择了2018年6月
表头将为：
June 2018 | May 2018 | March 2018 | December 2017 | July 2017 | June 2017
我先试着逐行解决这个问题(我刚刚开始学习JS)，然后我坚持使用how to flip it.
- The 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的数据库。可以使用数据库表中的month列构建根据headers.
- The下拉列表中显示的月份而变化的表单元格中的数据。
- 我唯一的问题是/是使用下拉菜单的动态表标题部分...
再次感谢您的反馈，更正...我正在学习...我在成长。
保重!
回答 2
Stack Overflow用户
发布于 2018-07-28 01:24:58
您可以为每个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>
Stack Overflow用户
发布于 2018-07-28 01:35:40
使用此脚本，您应该能够完成您想要的操作。
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)。然后，脚本循环遍历需要的月份，并将它们输出到表中，检查是否应该返回一年。如果你有任何问题，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51562376
复制相关文章
相似问题
腾讯云开发者
