时间戳

首页 > 解决方案 > 如何将变量值添加到附加？

javascript - 如何将变量值添加到附加？

问题描述

我想在每个方块上显示从 0 到 224 的数字。方块是构建的，我可以在控制台上看到数字，但它们没有显示变量“x”的值

function buildBricks2() {
  let boardSide = 14;
  let table = $('<table>');
  let tbody = table.append('<tbody />').children('tbody');
  for (let i = 0; i <= boardSide; i++) {
    tbody.append('<tr />')
    for (let j = 0; j <= boardSide; j++) {
      let x = console.log(indexOfTile(i, j))

      tbody.append('<td />');
      $('td').append(x);
    }
  }
  table.appendTo('#board2');
}
buildBricks2();

function indexOfTile(row, column) {
  var boardLen = 15;
  if (row < boardLen && row >= 0 && column < boardLen && column >= 0) {
    return row * boardLen + column;
  } else {
    return -1;
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="board2"></div>

在此处输入图像描述

标签： javascriptjquery

解决方案

问题是因为您用于$('td')选择tdDOM 中存在的所有元素，但是在执行该行代码td时，DOM 中没有，因为您尚未附加它们。它们只存在于内存中。

解决此问题的最简单方法是修改代码以td在创建时设置文本。

另请注意，您设置x的返回值console.log()不正确。我认为这只是您的测试中的一个错字，而不是实际问题

for (let j = 0; j <= boardSide; j++) {
  let x = indexOfTile(i, j);
  $('<td />', { text: x }).appendTo(tbody);
}

此外，还有一些调整可以使逻辑更加高效和简洁。这是一个完整的例子：

function buildBricks2() {
  let boardSide = 14;
  let $table = $('<table>');
  let $tbody = $('<tbody />').appendTo($table);
  
  for (let i = 0; i <= boardSide; i++) {
    let $tr = $('<tr />').appendTo($tbody);
    for (let j = 0; j <= boardSide; j++) {
      let x = indexOfTile(i, j);
      $('<td />', { text: x }).appendTo($tr);
    }
  }
  
  $table.appendTo('#board2');
}
buildBricks2();

function indexOfTile(row, column) {
  var boardLen = 15;
  if (row < boardLen && row >= 0 && column < boardLen && column >= 0) {
    return row * boardLen + column;
  } else {
    return -1;
  }
};
td {
  border: 1px solid black;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="board2"></div>

推荐阅读