使用 jquery 将输入结果放在表的特定部分答案

【问题标题】：Putting input results in specific parts of a table using jquery使用 jquery 将输入结果放在表的特定部分
【发布时间】：2017-04-03 11:10:10
【问题描述】：

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

我正在尝试完成一个电视指南表，发现很难将特定的选择结果放入表的特定部分，有什么方法可以做到这一点吗？

该表有 10 行，每行有一个不同的电视频道，然后左侧有 24 列，代表一天中的每个小时。

【问题讨论】：

While typing in a text input field, printing the content typed in a div
你能分享一个jsfiddle或示例代码
以上为您编辑！

标签： javascript jquery html

【解决方案1】：

阅读您的问题后，我会考虑在每个表格单元格 (td) 上放置两个类。一类是频道，另一类是时间。

然后在 jQuery 中，对于每个数据项，您会找到匹配两个类的单元格并附加到该单元格 (td)。

例如，如果您有一张桌子：

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

然后你可以添加如下：

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

另见： How can I select an element with multiple classes in jQuery?

【讨论】：