Question

我有一个包含8行和2列的HTML <div></div>表：食物和卡路里。我想使用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行。

首先使用row和col类创建网格。

<强> 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语句的内容。您应该考虑使用下拉菜单。

编辑：我添加了一个提交按钮，因此您的代码将在＆＃34;点击＆＃34;该按钮上的事件。

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

1 个答案: