Putting input results in specific parts of a table using jquery

Question

<div id="booking-details">
    <label for="select-1">Select your Programme:</label> <br />
    <div class="styled-select">
        <select id="select-1">
            <option value="test_1">Test 1</option>
            <option value="test_2">Test 2</option>
            <option value="test_3">Test 3</option>
            <option value="test_4">Test 4</option>
            <option value="test_5">Test 5</option>
        </select>
    </div>

    <br />

    <label for="select-2">Select your time slot:</label> <br />
    <div class="styled-select">
        <select id="select-2">
            <option value="one">01:00</option>
            <option value="two">02:00</option>
            <option value="three">03:00</option>
            <option value="four">04:00</option>
            <option value="five">05:00</option>
            <option value="six">06:00</option>
            <option value="seven">07:00</option>
            <option value="eight">08:00</option>
            <option value="nine">09:00</option>
            <option value="ten">10:00</option>
            <option value="eleven">11:00</option>
            <option value="twevle">12:00</option>
            <option value="one-pm">13:00</option>
            <option value="two-pm">14:00</option>
            <option value="three-pm">15:00</option>
            <option value="four-pm">16:00</option>
            <option value="five-pm">17:00</option>
            <option value="six-pm">18:00</option>
            <option value="seven-pm">19:00</option>
            <option value="eight-pm">20:00</option>
            <option value="nine-pm">21:00</option>
            <option value="ten-pm">22:00</option>
            <option value="eleven-pm">23:00</option>
            <option value="midnight">00:00</option>
        </select>
    </div>
</div>

I'm trying to complete a tv guide table and finding it difficult to put specific select results into specific parts of a table, is there any methods I could use to do this?

The table has 10 rows, each a different tv channel and then 24 columns to the left in reference to each hour of the day.

[While typing in a text input field, printing the content typed in a div](http://stackoverflow.com/q/14411235/5104748) — Mohammad, Apr 03 '17 at 11:13

Greg · Answer 1 · 2017-09-21T16:24:01.523

Reading your question, I'd consider putting two classes on each table cell (td). One class would be the channel, and other would be the time.

Then in jQuery, for each data item, you'd find the cell that matches both classes and append to that cell (td).

For example, if you had a table:

<table>
    <tr>
        <td class="test_4 ten-pm"></td>
        <td class="test_4 eleven-pm"></td>
        <td class="test_4 midnight"></td>
    </tr>
    <tr>
        <td class="test_5 ten-pm"></td>
        <td class="test_5 eleven-pm"></td>
        <td class="test_5 midnight"></td>
    </tr>
<table>

Then you could add to it such as:

$('td.test_5.midnight').append( "x" );

See Also: How can I select an element with multiple classes in jQuery?

Putting input results in specific parts of a table using jquery

1 Answers1