通过javascript填充html表格答案

【问题标题】：Filling an html table through javascript通过javascript填充html表格
【发布时间】：2020-03-23 11:04:39
【问题描述】：

这是一个用于 PHP/JavaScript 的 uni 项目。这个概念是我们创建一个空表，然后从用户那里获取输入并将此文本放在表的奇数行中。问题是，我已经创建了表格，但无法将文本传递给位于奇数行单元格内的多个段落。我尝试使用getElementById 填充单元格的段落，但我发现每个段落都需要一个唯一的 id，因此它只填充第一个单元格。然后我尝试了getElementsByClassName，但这不起作用，因为没有.innerHTML。基本上，我想要做的就是获取相同的输入并将其分发到多个段落或如果有办法直接分发到单元格。代码在底部。脚本现在不工作，我把它留在里面了。

谢谢

<body>

    <p class="p1">5th excercise Php</p><br><br><br>
    <input type="button" id="btn" value="Give Input"><br><br>
    <?php
    echo "<table>"; 

for($i=1;$i<=10;$i++){ 

    echo "<tr>"; 
        for($j=1;$j<=10;$j++){
            if($i % 2 == 0){
               echo "<td style='background-color:green;color:green;'>"."<p>"."."."</p>"."</td>";
                }
            else{
                echo "<td style='background-color:red; color:red;'>"."<p>"."."."</p>"."</td>";
            }
        } 
    echo "</tr>"; 
} 

echo "</table>";
    ?>
<script>
document.getElementById("btn").onclick= function(){f()}
function f(){
    var x= prompt("Give input");
    document.getElementById("").style.color = "black";
    document.getElementById("").innerHTML= x;

}
</script>
</body>

【问题讨论】：

标签： javascript php html html-table

【解决方案1】：

这可以通过不同的方式实现。在这里，我给你一个简单的解决方案，只需在段落标签中添加两个类奇数和偶数，使用 querySelector 我们可以获得所有奇数行并轻松添加 innerHtml。

document.getElementById("btn").onclick = function() {
  f()
}

function f() {
  var x = prompt("Give input");

  document.querySelectorAll('.odd').forEach(p => {
    p.innerHTML = x;
    p.style.color='black';
  });

}

<body>

  <p class="p1">5th excercise Php</p><br><br><br>
  <input type="button" id="btn" value="Give Input"><br><br>
  <table>
    <tr>
      <td style='background-color:green;color:green;'>
        <p class='even'></p>
      </td>
    </tr>
    <tr>
      <td style='background-color:red;color:red;'>
        <p class='odd'></p>
      </td>
    </tr>
      <tr>
      <td style='background-color:green;color:green;'>
        <p class='even'></p>
      </td>
    </tr>
    <tr>
      <td style='background-color:red;color:red;'>
        <p class='odd'></p>
      </td>
    </tr>
      <tr>
      <td style='background-color:green;color:green;'>
        <p class='even'></p>
      </td>
    </tr>
    <tr>
      <td style='background-color:red;color:red;'>
        <p class='odd'></p>
      </td>
    </tr>
  </table>


</body>

这里我删除了 php 代码，因为我不知道如何在 stackoverflow 上添加它，但您可以使用 php 添加行，它会为您工作。

【讨论】：

如果您需要任何进一步的帮助，请告诉我。快乐编码

【解决方案2】：

你会遇到的困难是，getElementByClassName 渲染了一个 HTMLCollection，这是一个伪集合，但不是你可以轻松迭代的东西。

但是你可以窃取（JS 的力量！）Array 的行为来达到这个目的。像这样：

  const allCells = document.getElementsByClassName("first");

  Array.prototype.forEach.call(allCells, function(elt) {
    elt.innerHTML = choice;
  });

因此，您只需在所需的表格单元格（= 奇数行单元格）中添加一个类名（在我的示例中为“first”）。

【讨论】：

【解决方案3】：

由于这是学校的家庭作业，我不会分享任何代码示例。

解决方案 1： 我认为 php 循环已经知道哪些行是奇数行和偶数行，因此将其与类属性一起使用就很容易了。

然后使用 getElementsByClassName() 创建一个可以在 javascript 中迭代的变量来填充值。

解决方案 2： 在您的 javascript 中使用 getElementsByTagName() 来迭代 TR 并计算哪些行是偶数或奇数，并根据 TD 元素进行相应的更改。

这需要更多的工作，但会教您更多关于 getElement 样式函数的工作原理。

【讨论】：

【解决方案4】：

您可以像这样在段落中添加id 元素

"<p id='id_{$j}'>"

'id_{$j}' 部分将导致类似id_0、id_1 等字符串。

然后您必须遍历 JavaScript 部分中的所有列并使用这些 id 设置它们的 innerHtml。

【讨论】：