通过二维数组在JavaScript中创建两列HTML表
[英]Create two column HTML table in javascript from two dimensional array
问题描述
In my code: 
在我的代码中：
function addTable(){
var timestamp = ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat", "Sun"];
var value =[1,2,3,4,5,6,7]
var items = [timestamp, value];
var tableDiv = document.getElementById("table2");
var table = document.createElement('TABLE');
var tbody= document.createElement('TBODY');
var tr = document.createElement('TR');
table.appendChild(tbody);
//create header
tbody.appendChild(tr);
var heading = ["Timestamp", "Value"];
for (var col = 0; col<heading.length; col++){
var th = document.createElement('TH');
th.width = '75';
th.appendChild(document.createTextNode(heading[col]));
tr.appendChild(th);
}
//create rows for each stock[i] length
for (var f=0; f < items[i].length; f++){
var tr = document.createElement('TR');
}
for (i = 0; i < items.length; i++) {
for (j = 0; j < items[i].length; j++) {
var td = document.createElement('TD')
td.appendChild(document.createTextNode(items[i][j]));
tr.appendChild(td);
}
tbody.appendChild(tr);
}
tableDiv.appendChild(table);
}
I created a 2d array populated with two arrays(timestamp and value). 我创建了一个二维数组，其中填充了两个数组（时间戳和值）。 The problem with this code is that it only generates a single row with the timestamp content listed, then the value content listed afterwards. 此代码的问题在于，它只会生成列出了时间戳内容的一行，然后是随后列出的值内容。 What I wanted to create was a table where each row has the timestamp and it's respective value. 我想创建一个表，其中每行都有时间戳及其各自的值。 Row 1 would be "Mon" in the first cell and then "1" in the second cell/column. 第1行在第一个单元格中为“ Mon”，然后在第二个单元格/列中为“ 1”。 Row 2 would be "Tues" in the first cell and then "2" in the second cell/column. 第2行在第一个单元格中为“ Tues”，然后在第二个单元格/列中为“ 2”。
What am I doing incorrectly in this code? 我在这段代码中做错了什么？
Also, in my actual code the arrays are dynamically made, so there is an unknown length for the timestamp and value arrays. 另外，在我的实际代码中，数组是动态创建的，因此时间戳和值数组的长度未知。
3 个解决方案
解决方案1
0 2016-12-28 15:49:14
You just check this code... 您只需检查此代码...
<html>
<head>
<title>GRID</title>
<style type="text/css">
table tr td { width: 50px; height: 50px; background-color: silver; border: 1px solid black; }
table tr td.over { background-color: yellow; }
table tr td.active { background-color: red; }
.controls { padding: 20px; }
</style>
</head>
<body>
<div class="controls">
<a href="javascript:void(0)" data-move="[-1, 0]">left</a>
<a href="javascript:void(0)" data-move="[0, -1]">top</a>
<a href="javascript:void(0)" data-move="[1, 0]">right</a>
<a href="javascript:void(0)" data-move="[0, 1]">bottom</a>
<a href="javascript:void(0)" data-move="[-1, -1]">topleft</a>
<a href="javascript:void(0)" data-move="[1, -1]">topright</a>
<a href="javascript:void(0)" data-move="[1, 1]">bottomright</a>
<a href="javascript:void(0)" data-move="[-1, 1]">bottomleft</a>
</div>
<table></table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var rows = 6,
cols = 7;
for(var i = 0; i < rows; i++) {
$('table').append('<tr></tr>');
for(var j = 0; j < cols; j++) {
$('table').find('tr').eq(i).append('<td></td>');
$('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j);
}
}
$('table tr td').mouseover(function() {
$(this).addClass('over');
}).mouseout(function() {
$(this).removeClass('over');
}).click(function() {
$(this).addClass('active');
});
$(".controls a").click(function() {
var $active = $("table tr td.active");
if($active.length > 0) {
var move = $.parseJSON($(this).attr('data-move'));
if(move.length >= 2) {
$active.each(function() {
var row = parseInt($(this).attr('data-row')) + move[1],
col = parseInt($(this).attr('data-col')) + move[0];
if(col >= cols) col = cols - 1;
if(col < 0) col = 0;
if(row >= rows) row = rows - 1;
if(row < 0) row = 0;
$(this).removeClass('active');
$('table tr').eq(row).find('td').eq(col).addClass('active');
});
}
}
});
});
</script>
</body>
</html>
解决方案2
0 已采纳 2016-12-28 16:03:34
Please check this solution it working : 请检查此解决方案是否有效：
You can try the solution online also Link 您也可以在线尝试解决方案链接
<div id="table2"></div>
<script>
addTable()
function addTable()
{
var timestamp = ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat", "Sun"];
var value =[1,2,3,4,5,6,7];
var items = [timestamp, value];
var tableDiv = document.getElementById("table2");
var table = document.createElement('TABLE');
var tbody= document.createElement('TBODY');
var tr = document.createElement('TR');
table.appendChild(tbody);
//create header
tbody.appendChild(tr);
var heading = ["Timestamp", "Value"];
for (var col = 0; col<heading.length; col++)
{
var th = document.createElement('TH');
th.width = '75';
th.appendChild(document.createTextNode(heading[col]));
tr.appendChild(th);
}
for (var f=0; f<timestamp.length; f++)
{
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
td1.appendChild(document.createTextNode(timestamp[f]));
td2.appendChild(document.createTextNode(value[f]));
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
}
tableDiv.appendChild(table);
}
</script>
解决方案3
-1 2016-12-28 15:44:34
for (var f=0; f < items[i].length; f++){
var tr = document.createElement('TR');
}
you should use items.length here.
and where is the value of i coming from 我的价值从何而来
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.