从二维数组用javascript创建两列HTML表_Javascript_Html_Arrays

从二维数组用javascript创建两列HTML表

javascript html arrays

从二维数组用javascript创建两列HTML表,javascript,html,arrays,Javascript,Html,Arrays,在我的代码中： 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.createE

在我的代码中：

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);
  }

我创建了一个二维数组，其中填充了两个arraystimestamp和value。这段代码的问题是，它只生成一行，其中列出了时间戳内容，然后列出了值内容。我想要创建的是一个表，其中每一行都有时间戳及其各自的值。行1在第一个单元格中为Mon，然后在第二个单元格/列中为1。第2行在第一个单元格中为TUE，然后在第二个单元格/列中为2

我在这段代码中做了哪些错误的事情

另外，在我的实际代码中，数组是动态生成的，因此时间戳和值数组的长度未知

    for (var f=0; f < items[i].length; f++){
      var tr = document.createElement('TR');
      }
you should use items.length here.

i的值从哪里来？你只要检查一下这个代码

<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>

请检查此解决方案是否正常工作：

您也可以在线尝试解决方案

17我的解决方案运行良好，并给出了期望的结果。请检查您是否应该解释原始代码的错误以及您是如何修复的。@barmar我在代码中提到了它，您需要进行比较it@xdc17请投票表决解决方案，这样它就可以帮助其他读者不必逐行比较代码来理解问题答复你应该用文字解释。@Barmar我们在这里提供的解决方案不是为了教学，因为我们还有一些其他工作。你应该解释原始代码的错误以及你是如何修复的。你确定……这是否有效？

<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>