gpt4 book ai didi

javascript - 如何仅更改表格中一行的颜色 (HTML/JavaScript)

转载 作者:太空宇宙 更新时间:2023-11-04 14:04:03 25 4
gpt4 key购买 nike

我应该制作一个用户将输入其数据的表格。因此,我们将Product NamePrice 以及Count 作为我们的列。

用户填写此数据后,“Sum”列应自动填写,即价格乘以计数。

我已经完成了程序`到这里为止。但是我对问题的延续有疑问:

我应该将具有最高总和行的颜色更改为蓝色并将最贵产品的行颜色更改为红色

如何实现?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
p{color:#F00};
</style>
<body>
<p> Please fill in the table and then click on "Submit Data": </p>
<table bordercolor="#333366" border="5">
<tr>
<td> <font style="background-color:#0F0"> Name of Product </td>
<td> <font style="background-color:#0F0"> Price </td>
<td> <font style="background-color:#0F0"> Count </td>
</tr>
<tr>
<td> <input type="text" id="textbox1"> </td>
<td> <input type="text" id="textbox2"> </td>
<td> <input type="text" id="textbox3"> </td>
</tr>
<tr>
<td> <input type="text" id="textbox4"> </td>
<td> <input type="text" id="textbox5"> </td>
<td> <input type="text" id="textbox6"> </td>
</tr>
<tr>
<td> <input type="text" id="textbox7"> </td>
<td> <input type="text" id="textbox8"> </td>
<td> <input type="text" id="textbox9"> </td>
</tr>
</table>
<input type="button" value="Submit Data" id="Submit" onClick="Submit()">
</body>
<script>
function Submit()
{


var a=new Array(
(document.getElementById("textbox1").value),
(document.getElementById("textbox2").value),
(document.getElementById("textbox3").value),
(document.getElementById("textbox4").value),
(document.getElementById("textbox5").value),
(document.getElementById("textbox6").value),
(document.getElementById("textbox7").value),
(document.getElementById("textbox8").value),
(document.getElementById("textbox9").value)
);

document.write("<table border='5' bordercolor='#333366'>");

var c=0;
document.write("<tr>");

document.write("<td id='td1'>");
document.getElementById("td1").innerHTML="Name of Product";
document.write("</td>");

document.write("<td id='td2'>");
document.getElementById("td2").innerHTML="Price";
document.write("</td>");

document.write("<td id='td3'>");
document.getElementById("td3").innerHTML="Count";
document.write("</td>");

document.write("<td id='td4'>");
document.getElementById("td4").innerHTML="Sum";
document.write("</td>");

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

for(i=0;i<3;i++)
{
document.write("<tr>");
for(j=0;j<4;j++)
{
var sum=a[c-1] * a[c-2];

if(j==3) {document.write("<td>" +sum+ "</td>");}

else
{
document.write("<td>" +a[c]+ "</td>");
c++;
}
}
document.write("</tr>");
}
document.write("</table>");
}
</script>
</html>

最佳答案

Here您可以阅读有关如何使用纯 JavaScript 更改 DOM 元素的 css 的信息。

您应该在要更改颜色的行上添加一个类或 ID,然后应用颜色:

document.getElementById("price-row").style.color="blue";

关于javascript - 如何仅更改表格中一行的颜色 (HTML/JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21265308/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com