Question

我试图添加4个“ tr”元素，每个元素都包含4个“ td”元素，但我不太清楚该怎么做。我可以在单个td上添加单个tr，但不能多个。

这是我不完整的代码。问题出在我写的“ //这里是问题！！！”的地方。非常感谢您的帮助。

/* ///// INITIAL TITLE ///// */
var initialTitle = document.createElement("h1");
var intialTitleContent = document.createTextNode("Please press the \"1\" key on your keyboard.");
initialTitle.appendChild(intialTitleContent);
document.body.appendChild(initialTitle);

/* ///// KEYDOWN CODE ///// */

window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {

if (key.keyCode == "49") // "1"
    {
        var pElement = document.createElement("p");
        var content = document.createTextNode("Welcome! This page is 
        made entirely out of javascript. It is completely impractical 
        to create a webpage in this manner. This page is simply a 
        demonstration of how javascript can be used to create and add 
        HTML elementS and CSS to a HTML document. You can add content 
        by pressing the \"1\" through to \"9\" keys.");

        pElement.appendChild(content);
        document.body.appendChild(pElement);
    }

// HERE IS THE PROBLEM!!!

else if (key.keyCode == "50") // "2"
    {   
        var i;
        var tableDiv = document.createElement("div");
        tableDiv.classList.add("div_1");
        var tableElement = document.createElement("table");
        var trElements = document.createElement("tr");
        var tdElements = document.createElement("td");
        tdElements.classList.add("tableCell");
        for (i = 0; i < 4; i++) {
            var multi =
            tableDiv.appendChild(tableElement);
            tableElement.appendChild(trElements);
            trElements.appendChild(tdElements);
        }
        document.body.appendChild(multi);

<!doctype html>
<html lang="en-gb">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, intital-scale= 1.0" />
  <title>Javascript Only Site</title>
</head>
<body>

<script src="JOS.js"></script>

</body>
</html>

Answer 1

您应该在循环内创建tdElement，然后附加到trElement中。还要在循环之外将trElement，tableElement附加到tableDiv。

window.onload = function()
{
  var tableDiv = document.createElement("div");
  var tableElement = document.createElement("table");
  var trElement = document.createElement("tr");
  
  tableDiv.classList.add("div_1");
  tableElement.setAttribute("border","1");
  
  for(var i = 1; i <= 4; i++)
  {
    var tdElement = document.createElement("td");
    
    tdElement.innerText = i;
    tdElement.classList.add("tableCell");
    trElement.appendChild(tdElement);
  }
  
  tableElement.appendChild(trElement);
  tableDiv.appendChild(tableElement);
  
  document.body.appendChild(tableDiv);
}

<html>
<body>
</body>
</html>

Answer 2

您可以使用innerHTML来更轻松地做到这一点。

tableDiv.innerHTML = `
  <table>
    <tbody>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
      <tr>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
        <td class="tableCell"></td>
      </tr>
    </tbody>
  </table>  
`;

我喜欢这种方法，因为它更清楚HTML的外观。当然，当您有很多标记时，会有一个临界点，这种方式变得不切实际，但是在这一点上，无论如何，还是值得研究一下_.js模板：https://lodash.com/docs#template

Answer 3

或者...

public final class Lion extends Animal {

    @JsonProperty("roars")
    private int roars;

    public Lion(@JsonProperty("name") String name, @JsonProperty("age") int age) {
        super(name, age);
        roars = 10; //starts with 10 roars
    }

}

Answer 4

您需要创建要添加的节点元素的新实例。否则，您最终将添加相同的元素实例，如果尝试再次添加它，将被移动。

例如，这将创建一个包含4行4列的表：

const mainEl = document.getElementsByTagName('main')[0];
const tableEl = document.createElement('table');

while(tableEl.childNodes.length<4){
  let trEl = document.createElement('tr');
  while(trEl.childNodes.length<4){
    let tdEl = document.createElement('td');
    tdEl.innerHTML = `row: ${tableEl.childNodes.length+1}<br > col: ${trEl.childNodes.length + 1}`;
    trEl.appendChild(tdEl);
  }
  tableEl.appendChild(trEl);
}

mainEl.appendChild(tableEl);

table{
width: 100%;
}
td{
  padding: 10px;
  border: 1px solid #000;
}

<main>

</main>

Answer 5

感谢大家的帮助。非常感谢。通过结合我从大家那里学到的知识，这就是我如何使它起作用的方法：

window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
    
// SECTION 1 - Paragraph explaining what this page is about and what to do.
    if (key.keyCode == "49") // "1"
    {
        var pElement = document.createElement("p");
        var content = document.createTextNode("Welcome! This page is made entirely out of javascript. It is completely impractical to create a webpage in this manner. This page is simply a demonstration of how javascript can be used to create and add HTML element and CSS to a HTML document. Meaning within the HTML document the <body> element only contains a link to the javascript code and what the javascript code has added. You can add content by pressing the \"1\" through to \"9\" keys. Each piece of content can then be styled by pressing the \"s\" key.");
        pElement.appendChild(content);
        document.body.appendChild(pElement);
    }
    
// SECTION 2 - TABLE
    else if (key.keyCode == "50") // "2"
    {
        var tableDiv = document.createElement("div");
        var tableElement = document.createElement("table");
        

        tableDiv.classList.add("div_1");
        for (var z = 1; z <= 4; z++) {
            var trElement = document.createElement("tr");
            
            tableElement.appendChild(trElement);
            
            for (var i = 1; i <= 4; i++) {
                var tdElement = document.createElement("td");

                tdElement.classList.add("tableCell");
                trElement.appendChild(tdElement);
            }
        }
        
        tableDiv.appendChild(tableElement);
        document.body.appendChild(tableDiv);   
    }

<!doctype html>
<html lang="en-gb">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, intial-scale= 1.0"/>
    <title>Javascript Only Site</title>
</head>
<body>

    <script src="js/JOS.js"></script>
</body>
</html>

使用javascript一次添加多个HTML元素

5 个答案: