javascript - 使用 JQuery/Javascript 将文本插入到 html div 表的特定单元格中？

Question

我有一个 HTML <div></div>表格有 8 行和 2 列:食物和卡路里。我想使用 javascript 将文本插入特定单元格。

我有一个 html 输入文本框，用户可以在其中输入一种食物(从 8 个选项中选择)。

某些食物总是放在特定的行中。例如，

Apple     = Row 1
Banana    = Row 2 
Blueberry = Row 3

etc...

用户的输入总是在第 1 列。网站自动返回的卡路里计数总是在第 2 列。

我希望发生的事情: 当用户输入食物时，它应该根据所选择的食物被放置到适当的行中(假设用户选择了 Apple，因此在本例中它位于第 1 行第 1 列)。

如果第 1 行第 1 列由用户输入填充，则第 1 行第 2 列会自动填充卡路里数(目前，将手动插入到代码中)。

当用户输入下一个食物时，它会再次被放入相应的行中。假设第 4 行第 1 列。那么第 4 行第 2 列将自动填充卡路里计数。

我不确定 JQuery 是否能够像这样将文本排序到特定的行/列中。

CSS:

div { display:table-cell; border:1px solid; }

HTML:

<div id=master>
  one<br>two
</div>
<div>
    three
</div>

任何人都可以协助处理这段代码吗？

Answer 1

这是一种蛮力方法。当您有 100 行时，有更有效的方法来创建它，但这种方法更易于阅读，尤其是当您只有 8 行时。

首先使用行和列类创建您的网格。

HTML:

<input id="food-input" type="text" placeholder="ENTER A FOOD">
<input id="btn-submit" type="submit">

<div class="row-1">
    <div class="col-1"></div>
    <div class="col-2"></div>
</div>
<div class="row-2">
    <div class="col-1"></div>
    <div class="col-2"></div>
</div>
<!-- ...etc, etc. -->

然后，您可以在单击提交按钮 on("click", callback) 或您希望的任何事件时获取输入字段的值。

JavaScript

$("#btn-submit").on("click", function(){
    var entry = $("#food-input").val();

    switch(entry){
        case "food-1":
            $(".row-1 .col-1").html(entry);
            $(".row-1 .col-2").html("380 calories");
        break;
        case "food-2":
            $(".row-2 .col-1").html(entry);
            $(".row-2 .col-2").html("125 calories");
        break;
        //... etc, etc
    }
});

我不建议您使用文本输入字段，因为用户可能会键入数百万个与您的 switch/case 语句不匹配的内容。您应该考虑使用下拉菜单。

编辑:我添加了一个提交按钮，因此您的代码会在该按钮上的“点击”事件上执行。