如何更改表格中只有一行的颜色（HTML/JavaScript）

我应该创建一个表格，用户将输入其数据。所以我们有产品名称和价格和计数作为我们的专栏。如何更改表格中只有一行的颜色（HTML/JavaScript）

在此之后数据是由用户填充“萨姆”栏应在自动填写这是价格乘以计数。

我已经完成了程序，直到这里。但是我有一个问题的延续问题：

我应该改变颜色具有最高金额到BLUE 行和改变颜色产品的排的这是最便宜的至RED。

怎么办？我已经为此工作了近3个小时，而且我无法通过老师教给我的任何方式来解决这个问题。

在此先感谢。

<!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>

来源

2014-01-21 user3220350

你最好从头开始你的代码，而无需['文件。write（）']（https://developer.mozilla.org/en-US/docs/Web/API/document.write）s; ）。 – Teemu

如果你的老师推荐'font'标签和/或'document.write'，那么他是一个欺诈行为。不要再听任何事情。 – m59

这是我会怎么做：Live demo (click).我加了一些默认值证明它有效。请注意，您寻找的两个结果最终可能会成为同一行，因此我建议对两个类进行不同的样式设置，以使它们都可以出现在单个元素上，或者一般地更改该方法。

<font>是不推荐使用的标签，不应使用。您的HTML中存在错误，因为您的font标签未关闭：</font>。如果输入的预期用途是“数字”，我建议type="number"。我没有看到任何需要输入的id。内联样式应该避免。最好在CSS中编写样式。同样，内联js不应该用于快速测试之外的目的。阅读其中的一些结果：Why is inline JS bad?而是在javascript中使用addEventListener来添加所需的功能。最后，document.write()只能用于写入未能加载的CDN脚本的回退脚本。这里不需要写任何html。只需搜索现有的html并根据需要修改它（我建议添加一个类）。

标记：

<p> Please fill in the table and then click on "Submit Data": </p> 

<table class="my-table"> 
    <thead> 
    <tr> 
     <td><span>Name of Product</span> </td> 
     <td><span>Price</span> </td> 
     <td><span>Count</span> </td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><input type="number" value="50"></td> 
     <td><input type="number" value="50"></td> 
     <td><input type="number" value="50"></td> 
    </tr> 
    <tr> 
     <td><input type="number" value="10"></td> 
     <td><input type="number" value="10"></td> 
     <td><input type="number" value="10"></td> 
    </tr> 
    <tr> 
     <td><input type="number" value="10"></td> 
     <td><input type="number" value="80"></td> 
     <td><input type="number" value="10"></td> 
    </tr> 
</table> 

<button id="submit">Submit</button>

的JavaScript：

var subBtn = document.getElementById('submit'); 

subBtn.addEventListener('click', function() { 
    highestSum(); 
    mostExpensive(); 
}); 

function mostExpensive() { 
    var values = []; 
    var cells = document.querySelectorAll('.my-table tbody td'); 
    for (var i=0; i<cells.length; ++i) { 
    var cell = cells[i]; 
    var input = cell.querySelector('input'); 
    values.push(Number(input.value)); 
    } 
    var max = Math.max.apply(Math, values); 
    var key = values.indexOf(max); 
    addClass(cells[key].parentNode, 'most-expensive'); 
} 

function highestSum() { 
    var rows = document.querySelectorAll('.my-table tbody tr'); 
    var sums = []; 
    for (var i=0; i<rows.length; ++i) { 
    var row = rows[i]; 
    sums.push(sumRow(row)); 
    } 
    var max = Math.max.apply(Math, sums); 
    var key = sums.indexOf(max); 
    addClass(rows[key], 'highest-sum'); 
} 

function sumRow(row) { 
    var sum = 0; 
    var inputs = row.querySelectorAll('input'); 
    for (var i=0; i<inputs.length; ++i) { 
    sum+= Number(inputs[i].value); 
    } 
    return sum; 
} 

function addClass(elem, cls) { 
    var current = elem.className; 
    cls = (current) ? ' '+cls : cls; 
    elem.className+= cls; 
}

来源

2014-01-21 18:31:53 m59

非常感谢你。这非常帮助我！（我的老师没有教我任何这些有用的代码...） – user3220350

Here你可以阅读关于如何使用纯JavaScript来更改DOM元素的CSS。

您应该添加你要更改的颜色，然后运用色彩的行类或ID：

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

来源

2014-01-21 17:44:16 abaracedo

如何更改表格中只有一行的颜色（HTML/JavaScript）

回答

相关问题