Question

我正在尝试创建表，并使用Javascript将ID和内容放入其中。

用''覆盖的字符是char（月份的第一个或第二个字母），n是在for loo运行时发生变化的数字。另外我还必须将++ n值填充到td class ='firstLine'中。

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/mydiary.css">
  </head>
  <body>
    <script type="text/javascript">
      var x = 32;
      var n = 0;
      document.write("<table>");
      for(i = 0; i<x; i++){
        document.write("<tr>");
          document.write("<td class='firstLine'>/*++n value*/</td>");
          document.write("<td id='j'+n></td>");
          document.write("<td id='f'+n></td>");
          document.write("<td id='m'+n></td>");
          document.write("<td id='a'+n></td>");
          document.write("<td id='ma'+n></td>");
          document.write("<td id='ju'+n></td>");
          document.write("<td id='jl'+n></td>");
          document.write("<td id='au'+n></td>");
          document.write("<td id='s'+n></td>");
          document.write("<td id='o'+n></td>");
          document.write("<td id='n'+n></td>");
          document.write("<td id='d'+n></td>");
        document.write("</tr>");
        n++;
      };
      document.write("</table>");
    </script>
  </body>
</html>

Answer 1

在您的代码中，您将n递增两次（如果这是基于意图的话）：一次在表的开头使用++n，另一次在表的行末使用{ {1}}。您只需在开始时简单地执行n++。

此外，关于将ID附加到n++元素上，请记住，您只是在执行字符串连接，因此可以使用：

<td>

如果您熟悉模板文字，那么可读性会更好：

document.write("<td id='j"+n+"'></td>");

请参见下面的概念验证：

document.write(`<td id="j${n}"></td>`);

var x = 32;
var n = 0;
document.write("<table>");
for (i = 0; i < x; i++) {
  n++;
  document.write("<tr>");
  document.write("<td class='firstLine'>"+n+"</td>");
  document.write("<td id='j"+n+"'></td>");
  document.write("<td id='f"+n+"'></td>");
  document.write("<td id='m"+n+"'></td>");
  document.write("<td id='a"+n+"'></td>");
  document.write("<td id='ma"+n+"'></td>");
  document.write("<td id='ju"+n+"'></td>");
  document.write("<td id='jl"+n+"'></td>");
  document.write("<td id='au"+n+"'></td>");
  document.write("<td id='s"+n+"'></td>");
  document.write("<td id='o"+n+"'></td>");
  document.write("<td id='n"+n+"'></td>");
  document.write("<td id='d"+n+"'></td>");
  document.write("</tr>");
};
document.write("</table>");

优化注意事项

如果您真的想优化代码，这里还有一些技巧：

使用/** For stylistics only **/ td { border: 1px solid; padding: .5em 1em; }代替document.body.append(...)，因为它将覆盖体内的所有内容
在构造相当大的表时，可能需要使用DocumentFragment API。

以下是代码优化版本的示例：

document.write

var x = 32;
var n = 0;

// Create empty table
var table = document.createElement('table');

// Create fragment to hold all the rows
var fragment = document.createDocumentFragment();

for (var i = 0; i < x; i++) {
  n++;
  
  // Create row and an array of months
  var row = document.createElement('tr');
  var months = ['j', 'f', 'm', 'a', 'ma', 'ju', 'jl', 'au', 's', 'o', 'n', 'd'];
  
  // Create and Append first cell into row
  var firstCell = document.createElement('td');
  firstCell.classList.add('firstLine');
  firstCell.textContent = n;
  row.appendChild(firstCell);
  
  // Create and Append all months into each row
  months.forEach(function(month) {
    var cell = document.createElement('td');
    cell.id = month + n;
    
    row.appendChild(cell);
  });
  
  // Now we are done with the row
  // Append row into the document fragment
  fragment.appendChild(row);
};

// Now the document fragment is ready to use
// Append entire fragment into table element
table.appendChild(fragment);

// Now the table element is ready to use
// Append entire table into body element
document.body.appendChild(table);

使用javascript自动将ID和内容放入表td

1 个答案:

优化注意事项