在jQuery中嵌套的二維表，將TD追加到TR

當我通過瀏覽器運行這個時，我得到一個字符串「< td/>」。這裏發生了什麼，以及如何獲得理想的結果？在jQuery中嵌套的二維表，將TD追加到TR

<div id="grid"> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script type="text/javascript" src="asset/js/jquery-3.2.1.min.js"></script>  <script type="text/javascript"> 
    $.getJSON('asset/json/tictactoe.json', 
     function(data) 
     { 
     $("#grid").append('<table/>'); 
     var table = $("#grid").find("table"); 
     for (var i=0; i<data.length; ++i) 
     { 
      table.append('<tr/>'); 
      for (var j=0; j<data[i].length; ++j) 
      { 
      var row = $("#grid").find("table").children()[i]; 
      row.append('<td/>'); 
      // row.find("td").html(data[i][j]); *** also, use children here instead of find, because another bug *** 
      // add OO events and functionality 
      } 
     } 
     } 
    ); 
    </script> 
</div>

我正在通過json對象循環來操縱我在運行中創建的元素的innerHTML。我第一次使用JavaScript DOM，它沒有我需要添加功能來製作這個Tic Tac Toe遊戲的靈活性。

添加：這裏是JSON

[ 
    ["???","???","???"], 
    ["???","???","???"], 
    ["???","???","???"] 
]

加：這是從上面的輸出jQuery的

<div id="grid"> 
<!-- ... some javascript ... --> 
<table><tr>&lt;td/&gt;&lt;td/&gt;&lt;td/&gt;</tr><tr>&lt;td/&gt;&lt;td/&gt;&lt;td/&gt;</tr><tr>&lt;td/&gt;&lt;td/&gt;&lt;td/&gt;</tr></table></div>

謝謝你的HTML。

加：解決方案

<script type="text/javascript"> 
    $.getJSON('asset/json/tictactoe.json', 
     function(data) 
     { 
     $("#grid").append('<table/>'); 
     var table = $("#grid").find("table"); 
     for (var i=0; i<data.length; ++i) 
     { 
      $(table).append('<tr/>'); 
      for (var j=0; j<data[i].length; ++j) 
      { 
      var row = $(table).children()[i]; 
      $(row).append('<td/>'); 
      var td = $(row).children()[j]; 

      // add the 2D grid from JSON object 
      $(td).html(data[i][j]); 

      // add OO events and functionality 
      // $(td).hover(function() { $(this).toggleClass("hovered"); }); 
      // $(td).click(function() { $(this).toggleClass("pushed"); }); 
      } 
     } 
     } 
    ); 
    </script>

來源

2017-05-31 Jordan Jelinek

告訴我們你嘗試過'table.insertRow（）'和'row.insertCell（）' –

您的JSON結構作品「，但我真正想要的是追加onclick和onhover事件，以便這些單元格可點擊，並且可以看起來像按鈕切換邊框樣式：outset和border-style：inset。所以我可以跟這個一起去，但我希望能夠把這些事件放在TD上，這樣它就更加面向對象，並且不太靈活。 –

您需要使用$即$(row).append("<td/>");

來源

2017-05-31 04:29:17

非常感謝！我立即在桌上得到了TD。 –

nw。大多數時候，最好在jquery函數'$'中使用存儲元素，因爲它實際上告訴它執行jQuery的東西。 –

這是你想要的？在循環中，我創建了表格html數據並最終附加到網格中。

<div id="grid"> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script type="text/javascript" src="asset/js/jquery-3.2.1.min.js"></script> 
 
    <script type="text/javascript"> 
 
    var data = [ 
 
    ["???","???","???"], 
 
    ["???","???","???"], 
 
    ["???","???","???"] 
 
]; 
 
     function create_Table() 
 
     { 
 
     var table = "<table border='1'>"; 
 
     for (var i=0; i<data.length; ++i) 
 
     { 
 
      table +="<tr>"; 
 
      for(var j =0; j<data[i].length; ++j){ 
 
      table +="<td>"+data[i][j]+"</td>"; 
 
      } 
 
      
 
      $("#grid").html(table); 
 
     } 
 
     } 
 
    create_Table(); 
 
    </script> 
 
</div>

來源

2017-05-31 04:23:24

那「 –

在jQuery中嵌套的二維表，將TD追加到TR

回答

相關問題