Question

在我的代码中：

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

我创建了一个填充了两个数组（时间戳和值）的二维数组。此代码的问题在于它仅生成列出时间戳内容的单行，然后生成后面列出的值内容。我想要创建的是一个表，其中每一行都有时间戳和它各自的值。第1行将是＆＃34; Mon＆＃34;在第一个单元格然后＆＃34; 1＆＃34;在第二个细胞/列中。第2行将是＆＃34;周二＆＃34;在第一个单元格然后＆＃34; 2＆＃34;在第二个细胞/列中。

我在这段代码中做错了什么？

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

Answer 1

您只需查看此代码......

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

Answer 2

请检查此解决方案是否有效：

您也可以在线试用解决方案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>

Answer 3

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

和i的价值来自

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

3 个答案: