如何根据特定输入动态为表格行着色？

Question

我刚刚开始学习 javascript、jquery 和 ajax。

我真的需要帮助了解逻辑或我应该如何解决这个问题：

我有一张可能是每月的“费用”表：

      Type     Cost     Monthly/yearly
      Laundry    2000$     Monthly
      Groceries    300$    Monthly
      Clothes    100$    Monthly

我有一个输入 budget 。我需要的是说用户输入 200$ ，成本大于预算并且每月的行应该用红色着色：

 Type     Cost     Monthly/yearly
  Laundry    2000$     Monthly (colored in red)
  Groceries    300$    Monthly (colored in red)
  Clothes    100$    Monthly

但是用户可以输入另一个 budget ，然后表格中的颜色应该会自动更新。现在他输入1000$：

Type     Cost     Monthly/yearly
      Laundry    2000$     Monthly ( only one colored in red)
      Groceries    300$    Monthly 
      Clothes    100$    Monthly

我怎样才能做到这一点？我只需要知道如何明智地处理这个逻辑。我正在使用 Node.Js

Answer 1

如果您只向我们发布您的想法，而没有任何实际代码，我们将无法真正帮助您。我只给你和建议：你可以用 javascript 检查你输入框的值，如果它大于/小于 X，通过 Javascript 为它着色（使用“样式”属性）。示例

<input type="text" id="boo" onfocusout="colourbox()">

在你的head标签中，写一些js代码

<script>
function colourbox(){
var boo = document.getElementById("boo");
if(boo.value > 200)
    boo.style="background-color:red";
}
</script>

如果输入框包含大于 200 的值，此代码会将您的输入框变为红色。希望对您有所帮助

Answer 2

我会尝试给你一些非常奇怪的伪代码。希望能帮助到你 我将为您解释客户端和服务器端版本的两种可能方法。还有一些关于您可能使用的注释。

尝试这两种方法可能最符合您的利益，以后可能会派上用场。

---

客户端版本：

CSS

创建一个 CSS 类来设置背景和字体颜色的样式，比如说危险，适用于任何一种方法。您还应该在行内设置 td 样式

HTML

创建您的输入并为其命名，假设名称是预算 使用所有数据创建表

JS

假设您想在输入字段更改时更改颜色 首先，您需要捕获字段输入的更改。可以使用jquery的on()函数

• 当您从 所有行
  • 获取输入的值
  • 遍历每一行
  • 获取成本单元的数值。使用parseInt 或 parseFloat 获取数值。如果需要删除逗号或 $ 使用replace() 签名
  • 获取文本值 每月/每年
  • 检查您的成本数值是否大于预算以及文本值是否等于每月
  • 如果条件为真add the class 使用 addClass() 对当前行造成危险

---

服务器端版本：

由于您在服务器端工作，我假设您将数据保存在变量或数组中。假设你有一个对象数组，沿着

var array = [
    {type: 'laundry',cost: 200, repetition: 'monthly'},
    {type: 'food',cost: 100, repetition: 'monthly'},
    ...
]

和你的预算

var budget = 200;

CSS

创建一个 CSS 类来设置背景和字体颜色的样式，比如说危险，适用于任何一种方法。您还应该在行内设置 td 样式。

服务器生成的视图

• 您需要遍历数组的每个元素
• 在每次迭代中，您将使用以下数据创建一行
• 如果成本
• 将类型单元格添加到行中
• 将成本单元格添加到行中
• 将重复单元格添加到行中