從二維陣列在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表

回答

相關問題