Question

当我通过浏览器运行时，我会得到一个文字字符串＆＃34;＆lt; td /＆gt;＆＃34;。这里发生了什么，我如何得到理想的结果？

<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游戏。

add：这是json

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

add：这是从上面的jQuery输出的HTML

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

谢谢。

添加：解决方案

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

Answer 1

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

Answer 2

这是你想要的吗？在循环中，我创建了表格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>

jQuery中嵌套的2D表，将TD附加到TR

2 个答案: