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

我有一個8行2列的HTML <div></div>表：食物和卡路里。我想用javascript將文本插入特定的單元格。使用JQuery/Javascript將文本插入到html div表格的特定單元格中？

我有一個html輸入文本框，用戶可以在其中輸入一種食物類型（8種選擇）。

某些食物總是放在某些行中。例如，

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

etc...

用戶的條目始終在列1.由網站自動返回的卡路里數總是在列2

我想什麼發生： 當用戶輸入食物時，應根據所選擇的食物將其放入適當的行中（假設用戶選擇蘋果，因此本例的第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>

任何人都可以幫助這是什麼碼？

來源

2015-05-04 Sherri

這是一種蠻力方法。當你有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 
    } 
});

我不建議你使用文本輸入字段，因爲用戶可以鍵入數以百萬計的東西，這將不匹配您的開關/ case語句。您應該考慮下拉菜單。

編輯：我添加了一個提交按鈕，所以你的代碼在該按鈕上的「點擊」事件上執行。

來源

2015-05-04 22:12:14 Marquizzo

謝謝！但是我無法獲得代碼的功能。 HTTP：//的jsfiddle。net/xjk8vkLf /我輸入「food-1」（不帶引號）並敲回車，沒有任何反應。無法分辨我要出錯的地方。 – Sherri

編輯：哇，沒關係。你只需要點擊文本框。我正在打「輸入」。無論如何，非常感謝你！易於理解和完美的解決方案！ – Sherri

是的，這就是「模糊」事件。它會在文本框丟失焦點時觸發。我只是更新了代碼以包含一個「提交」按鈕，並且當您點擊按鈕而不是模糊時，JavaScript就會執行。 – Marquizzo

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

回答

相關問題