Question

我通过for循环创建一个n * n表，然后我更改n的值并想重新加载表以显示新表。

 <table id = "chessboard">
       <script>
            createChessboard()
       </script>
 </table>

JavaScript的：

function createChessboard() {
        document.write('<tr><td></td>')
        for (var column=0;column<size;column++){
            document.write("<td>"+(column+1)+"</td>")
        }
        document.write('</tr>')
        for(var row=0;row<size;row++){
            document.write("<tr>")
            document.write("<td>"+(row+1)+"</td>")
            for(var column=0;column<size;column++){
                if(column%2 == row%2){
                    document.write("<td><input id="+row+column+" type=button onclick='putQueen(id)' style='background:#E5E4E2'/>")
                }else {
                    document.write("<td><input id="+row+column+" type=button onclick='putQueen(id)' style='background:gray'/>")
                }

            }
            document.write("</tr>")
        }
    }

如何在onchange（）方法中执行此操作？

Answer 1

您无法在document.write()方法中使用onchange（事实上，在任何回调方法中）。这是一种非常老式的方法，在现代JavaScript中很少使用。

相反，您可以将id="..."分配给您想要更改的元素（确保它们是唯一的），然后您就可以使用innerHTML更改其值，如下所示：< / p>

var board = document.getElementById('chessboard');
board.innerHTML = '<strong>Test</strong>';

此代码会用粗体＆＃39;测试＆＃39;替换您的表格。文本。您可以将ID添加到表中的单个colmns，然后以这种方式访问它们。

实际上，这也是生成电路板的推荐方法。与document.write不同，它不要求<script>标记放在<table id="chessboard">内，从而允许分离代码和表示。只需确保代码运行时<table id="chessboard">已经存在（最简单的方法是确保将<script>标记放在您的表格下方，在文档末尾）。

或者，如果你使用jQuery库，因为这个问题的标签假设（但也许你不使用它），你可以使用这个代码：

var $board = $('#chessboard');
$board.html('<strong>Test</strong>');

它等同于上面的代码并使用引擎盖下的innerHTML，但它有点短。如果你不了解jQuery，你可能不需要它，你可以在vanilla JavaScript中做同样的事情。

如果您不想为所有元素分配ID，可以使用

var board = document.getElementById('chessboard');
var trs = board.getElementsByTagName('TR');

获取表中的TR列表，然后在数组上迭代表行。当您找到所需的表格行时，可以使用trs[0].getElementsByTagName('TD')之类的内容来获取此行中的表格单元格列表。但这似乎不如使用ID方便。

作为innerHTML的选项，您可以使用直接DOM操作函数。当浏览器读取HTML时，它会将其转换为另一种形式DOM。 DOM表示与HTML相同的东西，但它不是字符串，而是结构化表示。

JavaScript可以使用innerHTML来更改DOM对象，也可以使用函数直接操作DOM。但通常比直接更改HTML代码更方便，因为浏览器已经为您完成了解析。

请参阅Mozilla的Introduction to the DOM获取解释。

Answer 2

我刚刚替换了document.write，因为它是bad practice。因此，每次更改select时，都会绘制DOM元素。

＆＃13;

function createChessboard(size) {
  var innerHTML = '<tr><td></td>';
  for (var column=0;column<size;column++){
    innerHTML += "<td>"+(column+1)+"</td>";
  }

  innerHTML += '</tr>';
  for(var row=0;row<size;row++){
    innerHTML += "<tr>";
    innerHTML += "<td>"+(row+1)+"</td>";
    for(var column=0;column<size;column++){
      if(column%2 == row%2){
        innerHTML += "<td><input id="+row+column+" type=button onclick='putQueen(id)' style='background:#E5E4E2'/>";
      } else {
        innerHTML += "<td><input id="+row+column+" type=button onclick='putQueen(id)' style='background:gray'/>";
      }          
    }

    innerHTML += "</tr>";
  }

  var chessEl = document.querySelector('#chessboard');
  chessEl.innerHTML = innerHTML;
};

createChessboard(5);

function changeSize(el) {
  var val = el.options[el.selectedIndex].value;
  createChessboard(val);
}

＆＃13;

  <form>
    <select onchange="changeSize(this)" >
      <option value="5"> 5 </option>
      <option value="8"> 8 </option>
    </select>
  </form>

  <table id ="chessboard">
  </table>

＆＃13;

如何重新加载由javascript创建的表

2 个答案: