时间戳

首页 > 解决方案 > 我需要创建一个表格，用户可以填写他想要的内容

javascript - 我需要创建一个表格，用户可以填写他想要的内容

问题描述

所以我想创建一个html，它将创建一个带有红色和绿色线条的10x10表格。之后会出现一个弹出窗口，要求用户输入一个单词，这个单词只会显示在红色方块上。我设法创建了表格和弹出窗口，但我不知道如何让它们交互。我也只能使用 html、javascript 和 php。我写的代码如下：

<body onload='myFunction()'>
  <?php echo "<table border =\"4\" style='border-color:blue;'>";
  for ($row=1; $row <= 10; $row++) {
    for ($col=1; $col <= 10; $col++) {
       if ($row%2==0) {
       echo "<td span style='border: 2px solid white;background-color: green'  height='50' width='50'></td /span> \n";}
       else {
         echo "<td span style='border: 2px solid white; background-color: red' height='50' width='50'></td /span> \n";
       }
        }
          echo "</tr>";
    }
    echo "</table>";?>
    <script>
      function myFunction() {
      var person = prompt("Εισαγεται εναν χαρακτηρα", "tsa");
      return person;
    }
</script>

</body>

标签： javascriptphphtml

解决方案

最简单的方法是在 JavaScript 中完成。顺便提一句。不要使用老式事件，现代浏览器支持addEventListener.

document.addEventListener('DOMContentLoaded', evt =>
{
  let table = document.createElement('table');
  table.innerHTML = ('<tr>' + ('<td></td>'.repeat(10)) + '</tr>').repeat(10);
  document.getElementById('table-container').appendChild(table);

  let person = prompt("Εισαγεται εναν χαρακτηρα", "tsa");

  table.querySelectorAll('tr:nth-child(2n+1)>td').forEach(td => td.innerText = person);
});
table
{
  border: 4px solid blue;
}

td
{
  border: 2px solid white;
  background-color: green;
  height: 50px;
  width: 50px;
}

tr:nth-child(2n+1)>td
{
  background-color: red;
}
<!DOCTYPE html>
<html lang=en>

<head><title>Table</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="table-container"></div>
  <script src="javascript.js"></script>
</body>

</html>

推荐阅读