如何更改表格中只有一行的顏色（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）

回答

相關問題