![](/img/trans.png)
[英]Cannot insert '</div> <div>' to a position in html page using javascript or jquery
[英]Using JQuery/Javascript to insert text into specific cells of a html div table?
我有一個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>
任何人都可以協助編寫此代碼嗎?
這是一種蠻力的方法。 當您有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語句不匹配的內容。 您應該考慮使用下拉菜單。
編輯:我添加了一個提交按鈕,因此您的代碼在該按鈕上的“單擊”事件上執行。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.