在选中单选按钮后，选择表td的确切编号 [英] Select exact number of table td after a radiobutton is checked

问题描述

我有一个多步骤表格，在一个步骤中，我选择可以用于下一步的整数(1–X).在下一步中，我有一个星期几的表(我在这里仅显示缩短的版本).一些单元格包含单选按钮.

I have a multistep form, where in one step I select the whole number (1–X) with which I can work in the next step. In the next step I have a table of days of a week (I only show a shortened version here). Some of the cells contain radiobuttons.

我想做的是:如果我选择了一个单选按钮，则需要向该列下面的TD列的确切数目添加一个类(我在其中检查了单选). 这是表格的示例:

What I want to do is: if I select one of the radiobuttons I need to add a class to the exact number of column TD which are below this one (where I checked the radio). Here is an example of the table:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Úterý<br />06.12.2011</th>
           <th>Středa<br />07.12.2011</th>
       </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>08:00</td>
            <td><div class="form-item" id="edit-datetime-worker-wrapper">
                <label class="option" for="edit-datetime-worker">
                <input type="radio" id="edit-datetime-worker" name="datetime_worker" value="2011-12-06T08:00:00::3"   class="form-radio" />
                <span>6. 12. 2011 – 08:00</span></label>
                </div>
            </td>
            <td><div class="form-item" id="edit-datetime-worker-11-wrapper">
                <label class="option" for="edit-datetime-worker-11">
                <input type="radio" id="edit-datetime-worker-11" name="datetime_worker" value="2011-12-07T08:00:00::3"   class="form-radio" />
                <span>7. 12. 2011 – 08:00</span></label>
                </div>
            </td>
        </tr>
        <tr class="even">
            <td>08:30</td>
            <td><div class="form-item" id="edit-datetime-worker-1-wrapper"></div></td>
            <td><div class="form-item" id="edit-datetime-worker-12-wrapper">
                <label class="option" for="edit-datetime-worker-12">
                <input type="radio" id="edit-datetime-worker-12" name="datetime_worker" value="2011-12-07T08:30:00::3"   class="form-radio" />
                <span>7. 12. 2011 – 08:30</span></label>
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td>09:00</td>
            <td><div class="form-item" id="edit-datetime-worker-2-wrapper">
                <label class="option" for="edit-datetime-worker-2">
                <input type="radio" id="edit-datetime-worker-2" name="datetime_worker" value="2011-12-06T09:00:00::3"   class="form-radio" />
                <span>6. 12. 2011 – 09:00</span></label>
                </div>
            </td>
            <td><div class="form-item" id="edit-datetime-worker-13-wrapper">
                <label class="option" for="edit-datetime-worker-13">
                <input type="radio" id="edit-datetime-worker-13" name="datetime_worker" value="2011-12-07T09:00:00::3"   class="form-radio" />
                <span>7. 12. 2011 – 09:00</span></label>
                </div>
            </td>
        </tr>
    </tbody>
</table>

在上一步中，我有一个数字，例如2.因此，我检查了第二列中的第一个单选按钮(středa7.12.2011)，我需要在下面的单元格中添加一个类(或其中的div) ).

From the previous step I have a number, say 2. So I check the first radio button in the second column (středa 7. 12. 2011) and I need to add a class to the cell below (or div in it).

我该如何实现?我真的是JS的新手. :( 如果您需要其他信息，请随时询问.

How can I achieve this? I'm really a noob in JS. :( If you need additional information, don't hesitate to ask.

推荐答案

您要根据选择哪个单选按钮来突出显示一列吗? http://jsfiddle.net/rkw79/fYqME/

Did you want to highlight a column depending on which radio button is selected? http://jsfiddle.net/rkw79/fYqME/

您可以使用.index()确定选择了哪一列，然后使用:nth-child()选择该列中的实际td.

You can make use of .index() to determine which column is selected, and then use :nth-child() to select the actual td in the column.

$('input:radio').change(function() {
    var i = $(this).parent().index() + (1);
    $('td').removeClass('highlight');
    $('td:nth-child(' + i + ')').addClass('highlight');
});

已更新.看起来比需要的复杂.如果您可以阐明您的功能需求，我们可以简化代码.但是，如果不能这样做，这是更新的代码. var num = 2是要突出显示的单元格数量. http://jsfiddle.net/rkw79/fYqME/1/

Updated. Looks more complicated than it needs to be. If you can clarify your functional needs, we can simplify the code. But if that cannot be done, here's the updated code. var num = 2 is the amount of cells to highlight. http://jsfiddle.net/rkw79/fYqME/1/

$('input:radio').change(function() {
    var num = 2;
    var col = $(this).closest('td').index() + 1;
    var row = $(this).closest('tr').index();

    var tds = $('td:nth-child(' + col + ')');
    tds = tds.slice(row,row+num);

    $('td').removeClass('highlight');
    tds.addClass('highlight');
});

这篇关于在选中单选按钮后，选择表td的确切编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！