如何更改表格中仅一行的颜色（HTML/JavaScript）答案

【问题标题】：How to change the Color of only one row in a table (HTML/JavaScript)如何更改表格中仅一行的颜色（HTML/JavaScript）
【发布时间】：2014-02-11 11:17:59
【问题描述】：

我应该制作一个表格，供用户输入数据。所以我们有 Product Name 和 Price 和 Count 作为我们的列。

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

我已经完成了程序`直到这里。但我对问题的继续有疑问：

我应该将具有最高和的行的颜色更改为BLUE 并将最昂贵产品的行颜色更改为RED。

怎么做？

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

【问题讨论】：

你最好从头开始你的代码，没有document.write()s； )。
如果你的老师推荐了font标签和/或document.write，他就是骗子。不要再听他的任何事情了。

标签： javascript html css html-table row

【解决方案1】：

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

您应该在要更改颜色的行上添加一个类或 id，然后应用颜色：

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

【讨论】：

【解决方案2】：

我会这样做：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;
}

【讨论】：

非常感谢。这对我帮助很大！！（我的老师没有教过我这些有用的代码......）