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

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

<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()功能

从中捕获更改事件Remove the danger class时所有的行
- 获取输入值
- 遍历每一行
- 获取成本单元格的数值。使用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的样式。

SERVER GENERATED VIEW

您需要遍历数组的每个元素
在每次迭代中，您将使用以下数据创建一行
如果费用＆lt;预算和重复==＆＃39;每月＆＃39;那么你应该加上危险类到行
将类型单元格添加到行
将费用单元格添加到行
将重复单元格添加到行

如何动态地根据特定输入对表行进行着色？

2 个答案: