Using JQuery/Javascript to insert text into specific cells of a html div table?

Question

I have a HTML <div></div> table with 8 rows and 2 columns: Food and Calories. I want to use javascript to insert text into specific cells.

I have an html input text box where the user can enter a type of food (out of 8 choices).

Certain foods are always placed in certain rows. For example,

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

etc...

The user's entry is always on Column 1. The calorie count automatically returned by the website is always on Column 2.

What I'd like to happen: When the user enters the food, it should get placed into the appropriate row based on the food chosen (let's say the user chooses Apple, so that falls on Row 1 Column 1 for this example).

If Row 1 Column 1 is populated by the user's entry, then Row 1 Column 2 gets automatically populated with the number of calories (which will, for now, be manually inserted into the code).

When the user enters the next food, it gets placed into the appropriate row again. Let's say Row 4 Column 1. So then Row 4 Column 2 would be automatically populated with the calorie count.

I am unsure if JQuery is able to accomplish sorting text into specific rows/columns like this.

CSS:

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

HTML:

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

Can anyone assist with what this code?

Answer 1

This is a brute-force approach. There are more efficient ways to create this for when you have 100's of rows, but this way is easier to read, especially if you have only 8 rows.

First create your grid using row and col classes.

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. -->

Then, you can get the value of the input field when you click on the submit button on("click", callback) or whatever event you wish.

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
    }
});

I don't recommend you use a text input field because the user could type millions of things that won't match your switch/case statement. You should consider a dropdown menu instead.

Edit: I added a submit button, so your code executes on the "click" event on that button.