Question

我应该创建一个用户将输入其数据的表。因此，我们将产品名称和价格以及计数作为我们的列。

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

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

我应该将最高金额的颜色更改为 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>

Answer 1

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

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

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

Answer 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;
}

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

2 个答案: