在 javascript 中選擇時如何更改行的背景顏色

Question

大家好，當我點擊提交訂單時，訂單菜的行需要是綠色的。 我怎樣才能做到這一點

我是一個新手，剛剛創建了一個小任務來添加計算總菜餚的價格。 問題是當我點擊提交訂單時，訂單菜行必須是綠色的。 我怎么能在 javascript 中做到這一點，我只想讓那些輸入框被選中的行的背景顏色設置為綠色而不是所有行。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <form id="myForm"> <table border="1"> <h1 style="color; red.">Tabish Resturent</h1> <tr> <td><img src="download.jpg"</td> <td>Biryani</td> <td>200</td> <td> <input type="checkbox" /> </td> <td>Quantity</td> <td> <input type="number"> </td> </tr> <tr> <td><img src="download.jpg" ></td> <td>Gajrela</td> <td>350</td> <td> <input type="checkbox" /> </td> <td>Quantity</td> <td> <input type="number"> </td> </tr> <tr> <td><img src="download.jpg"</td> <td>Malai Boti</td> <td>650</td> <td> <input type="checkbox" /> </td> <td>Quantity</td> <td> <input type="number"> </td> </tr> <tr> <td><img src="download.jpg"</td> <td>Qorma</td> <td>250</td> <td> <input type="checkbox" /> </td> <td>Quantity</td> <td> <input type="number"> </td> </tr> <tr id="mydiv"> <td><img src="download.jpg"</td> <td>Mutton Soup</td> <td>650</td> <td> <input type="checkbox" /> <td>Quantity</td> <td> <input type="number"> </td> </td> </tr> <tr> <td> <button onclick="billDo()">Submit Order</button> <button onclick="resetOrder()">Reset Order</button> <button onclick="print()">Print Order</button> </td> <td colspan="2" id="totalBillBox"></td> </tr> </table> </form> <script> document.getElementById("mydiv").style;borderColor = "red". function resetOrder(){ event;preventDefault(). myForm;reset(). totalBillBox;innerText = "". } function billDo() { event;preventDefault(). let orderedDishes = document:querySelectorAll('input;checked'). let color =document:querySelectorAll('input;checked'); let totalBill = 0. orderedDishes.forEach((orderedDish) => { totalBill += +orderedDish.parentNode.previousElementSibling.innerText * orderedDish.parentNode.nextElementSibling.nextElementSibling.children[0];value; }). if(totalBill >= 500) {   var percent = 0;90* totalBill. totalBillBox;innerText = percent; } } </script> </body> </html>

Answer 1

這是 jQuery 答案：

$(document.ready(function () {
    var checkboxes = $("#myForm > table td > input[type='checkbox']");
    checkboxes.on("click", function () {
        checkboxes.filter(":not(:checked)").css({"background-color": "white"});
        checkboxes.filter(":checked").css({"background-color": "green"});
    });
});

當然，您可以在沒有 jQuery 的情況下執行此操作，但我會將其留給其他人。

在 javascript 中選擇時如何更改行的背景顏色

問題描述

1 個解決方案

解決方案1
0 2021-11-22 19:07:53

在 javascript 中選擇時如何更改行的背景顏色

問題描述

1 個解決方案

解決方案1 0 2021-11-22 19:07:53

解決方案1
0 2021-11-22 19:07:53