使用 javascript 创建具有 3 列的 table

Question

我被告知以下代码将创建一个 table 但似乎什么也没有发生？

我想要的是 table，其中 A1 B1 C1 中的问题编号每列最多 8 个问题。任何帮助表示赞赏。

var totalQuestions;

function createSheet() {
  var sheet = "";

  totalQuestions = 8;

  sheet += "<div><table>";

  for (var i = 0; i < totalQuestions; i++) {
    sheet += "<tr>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "A" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "B" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "C" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "</tr>";
  }

  sheet += "</table></div>";
}

table {
  width: 98%;
}

td,
th {
  font-size: 1.75em;
  padding: 0.4em;
  text-align: center;
}

th {
  font-weight: normal;
  width: 33.3%;
  font-size: 1.8em;
  padding: 0;
  margin: 0;
  background-color: rgb(51, 80, 58);
}

Answer 1

您需要将 HTML 文本插入到您的文档中。另外，不要忘记在函数末尾 return sheet。

参见：Element.insertAdjacentHTML()

var totalQuestions;

function createSheet() {
  var sheet = "";

  totalQuestions = 8;

  sheet += "<div><table>";

  for (var i = 0; i < totalQuestions; i++) {
    sheet += "<tr>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "A" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "B" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "<td class='question'>";
    sheet += "<div class='questionNumber'>" + "C" + (i + 1) + "</div>";
    sheet += "</td>";
    sheet += "</tr>";
  }

  sheet += "</table></div>";
  
  return sheet;
}

document.body.insertAdjacentHTML('beforeend', createSheet());

table {
  width: 98%;
}

td,
th {
  font-size: 1.75em;
  padding: 0.4em;
  text-align: center;
}

th {
  font-weight: normal;
  width: 33.3%;
  font-size: 1.8em;
  padding: 0;
  margin: 0;
  background-color: rgb(51, 80, 58);
}

您甚至可以为此创建一个函数：

const appendHtmlTextAsChild = (htmlText, parentElement = document.body) => {
  parentElement.insertAdjacentHTML('beforeend', htmlText);
};

appendHtmlTextAsChild(createSheet());

更新

您可以使用模板文字来简化它：

const range = (n, valueOrFunction) => (arr =>
  typeof valueOrFunction === 'function'
    ? arr.fill(null).map((v, i) => valueOrFunction(i))
    : arr.fill(valueOrFunction))(new Array(n));

const rangeMap = (n, valueOrFunction) => range(n, valueOrFunction).join('');

const appendHtmlTextAsChild = (htmlText, parentElement = document.body) =>
  parentElement.insertAdjacentHTML('beforeend', htmlText);

const createQuestionSheet = (questions, choices) => `
  <div>
    <table>
      <tbody>
        ${rangeMap(questions, question => `
          <tr>
            ${rangeMap(choices, choice => `
               <td class="question">
                <div class="questionNumber">
                  ${String.fromCharCode(65 + choice) + (question + 1)}
                </div>
              </td>
            `)}
          </tr>
        `)}
      </tbody>
    </table>
  </div>
`;

appendHtmlTextAsChild(createQuestionSheet(8, 4));

table {
  width: 98%;
}

td,
th {
  font-size: 1.75em;
  padding: 0.4em;
  text-align: center;
}

th {
  font-weight: normal;
  width: 33.3%;
  font-size: 1.8em;
  padding: 0;
  margin: 0;
  background-color: rgb(51, 80, 58);
}

使用 javascript 创建具有 3 列的 table

Creating a table with 3 columns using javascript

javascript

html-table

更新