how to change the background color of row when selected in javascript
Question
hi everyone when i click on submit order the row of order dish need to be green. how can i do that
i am a newbie just created small task to add calculate price of total dishes. the question is when i click on submit order the row of order dish need to be green. how can i do that in javascript, i just want make backgroud color of those row whose input box is checked to be set green not of all rows.
<,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>
1 answers
solution1
0 2021-11-22 19:07:53
Here's the jQuery answer:
$(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"});
});
});
You can, of course, do this without jQuery, but I'll leave that to someone else.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.