在 javascript 中选择时如何更改行的背景颜色
[英]how to change the background color of row when selected in javascript
问题描述
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.我怎么能在 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>
1 个解决方案
解决方案1
0 2021-11-22 19:07:53
Here's the jQuery answer:这是 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"});
});
});
You can, of course, do this without jQuery, but I'll leave that to someone else.当然，您可以在没有 jQuery 的情况下执行此操作，但我会将其留给其他人。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.