在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

回答

相关问题