我有一个<div></div>
8行2列的HTML表:食物和卡路里。我想使用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>
任何人都可以协助编写此代码吗?
这是一种蛮力的方法。当您有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语句不匹配的内容。您应该考虑使用下拉菜单。
编辑:我添加了一个提交按钮,因此您的代码在该按钮上的“单击”事件上执行。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句