通过javascript填充html表格
这是一个用于 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>
人到中年有点甜3回答
-
POPMUISE
由于这是学校的家庭作业，我不会分享任何代码示例。解决方案 1： 我认为 php 循环已经知道哪些行是奇数行和偶数行，因此将其与类属性一起使用会很容易。然后使用 getElementsByClassName() 创建一个可以在 javascript 中迭代以填充值的变量。解决方案 2： 在您的 javascript 中使用 getElementsByTagName() 迭代 TR 并计算哪些行是偶数或奇数，并根据 .这需要更多的工作，但会教您更多关于 getElement 样式函数的工作原理。 -
缥缈止盈
您会遇到的困难是getElementByClassName渲染一个HTMLCollection, 这是一个伪集合，但不是您可以轻松迭代的东西。但是你可以窃取（JS 的力量！） Array 的行为来达到这个目的。像那样： const allCells = document.getElementsByClassName("first"); Array.prototype.forEach.call(allCells, function(elt) { elt.innerHTML = choice; });因此，您只需在所需的表格单元格（= 奇数行单元格）中添加一个类名（在我的示例中为“first”）。 -
叮当猫咪
这可以通过不同的方式实现。在这里，我给你一个简单的解决方案，只需在段落标签中添加两个类奇数和偶数，使用 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 添加行，它会为您工作。
随时随地看视频慕课网APP
相关分类
JavaScript