Question

我有一个像这样的html设置：

<body>
    <table>
        <thead>
        </thead>

        <tbody id="Main-Table">
        </tbody>
    </table>
</body>

和一个看起来像这样的Javascript：

function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for( var i=0; i < 5; i++ )
    text += possible.charAt(Math.floor(Math.random() * possible.length));

return text;
}

function activate() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          listObj = JSON.parse(this.responseText);
          var entryCount = listObj.entry.length; 
      var rowCount = 0;
      //
      var rowToAppendId = makeid()
      var newRow = document.createElement("TR");
      newRow.setAttribute("id", rowToAppendId)
      document.getElementById("Main-Table").appendChild(newRow);
      //
      for (var count = 0; count < entryCount - 1; count++) {
          //
          //
          if (rowCount == 3) { // Ensure only 3 <TD> per <TR>(TableRow)
              var rowToAppendId = makeid();
              var newRow = document.createElement("TR");
              newRow.setAttribute("id", rowToAppendId);
              console.log("Creating - " + rowToAppendId);
              document.getElementById("Main-Table").appendChild(newRow);
              rowCount++;
          } else {
              rowCount++;
          };
          var currDataId = makeid();
          var createData = document.createElement("TD");
          createData.setAttribute("id", currDataId);
          document.getElementById(rowToAppendId).appendChild(createData);
          var imageSource = listObj.entry[count].imagesrc;
          var createImage = document.createElement("img");
          createImage.setAttribute("src", imageSource);
          document.getElementById(currDataId).appendChild(createImage);
          };
      };
  };
xmlhttp.open("GET", "images.json", true);
xmlhttp.send();
};

我遇到的问题是正在正确创建行，因为它应该因为某些我不知道的原因而没有将TableData附加到行中。如果有人看到我做错了什么，请告诉我。

Answer 1

rowCount++和if都有else（您应该在if内将其初始化为0）。你可以在不使用计数器rowCount的情况下通过使用%（modulu运算符）来实现同样的目的：

//...
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        listObj = JSON.parse(this.responseText);
        var entryCount = listObj.entry.length; 

        // no need to create a newRow here, it will be created inside the loop when needed
        var newRow;
        // entryCount - 1 should be just enrtyCount
        for (var count = 0; count < entryCount; count++) {
            // Will be true after each tree elements (when count will be 0, 3, 6, 9 ...) the first case will be handled here
            if (count % 3 == 0) {
                var rowToAppendId = makeid();
                newRow = document.createElement("TR");
                newRow.setAttribute("id", rowToAppendId);
                console.log("Creating - " + rowToAppendId);
                document.getElementById("Main-Table").appendChild(newRow);
            }

            var currDataId = makeid();
            var createData = document.createElement("TD");
            createData.setAttribute("id", currDataId);
            // no need to select the row we already have it (newRow)
            newRow.appendChild(createData);
            var imageSource = listObj.entry[count].imagesrc;
            var createImage = document.createElement("img");
            createImage.setAttribute("src", imageSource);
            // no need to select the td we already have it (createData)
            createData.appendChild(createImage);
        };
    };
};
//...

注意：如评论中所述，无需使用这些晦涩的ID。既然你已经添加了它们，所以你可以在循环中选择元素，就像我提到的那样不需要它们，因为不需要选择（你已经将它们存储在变量newRow和{{1 }}）。

表数据未附加到动态创建的行

1 个答案: