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

时间:2017-04-03 11:10:11

标签: javascript jquery html



<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>
&#13;
&#13;
&#13;

我试图完成一个电视指南表并发现很难将特定的选择结果放入表格的特定部分,我有什么方法可以用来做这个吗?

该表有10行,每行有一个不同的电视频道,然后是左侧24列,参考当天的每个小时。

1 个答案:

答案 0 :(得分:0)

阅读你的问题,我考虑在每个表格单元格(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?