从二维阵列在JavaScript中创建两个列HTML表

在我的代码：从二维阵列在JavaScript中创建两个列HTML表

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

我创建填充两个数组（时间戳和值）的2D阵列。此代码的问题在于，它仅生成列出了时间戳内容的单个行，然后列出了后面列出的值内容。我想创建的是一个表格，每行都有时间戳和相应的值。行1将在第一个单元格中为“Mon”，然后在第二个单元格/列中为“1”。行2将在第一个单元格中为“周二”，然后在第二个单元格/列中为“2”。

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

此外，在我的实际代码中，数组是动态生成的，所以对于时间戳和值数组有一个未知长度。

来源

2016-12-28 xdc17

17我的解决方案是工作的罚款，并给予期望的结果，请检查 –

请检查该解决方案能够正常工作：

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

来源

2016-12-28 16:03:34

你应该解释原始代码有什么问题，以及你如何修复它。 – Barmar

@barmar我已经在代码中提到它，只需要将其与代码进行比较 –

@ xdc17请投票解决方案，以便它可以帮助其他人 –

-1

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

，并在那里从

来源

2016-12-28 15:44:34 jindhk

这不会解决你应该解释一下什么是错与原来的代码问题 –

来临了我的价值你只要检查这个代码...

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

来源

2016-12-28 15:49:14

以及如何修复它。 – Barmar

你确定..这是否令人w舌？ –

从二维阵列在JavaScript中创建两个列HTML表

回答

相关问题