Question

我有一个多步形式，在一步中我选择整个数字（1-X），我可以在下一步中使用它。在下一步中，我有一个星期几的表（我这里只显示一个缩短的版本）。一些细胞含有radiobutton。

我想要做的是：如果我选择其中一个单选按钮，我需要将一个类添加到低于此单位的TD列的确切数目（我检查了无线电）。以下是该表的示例：

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

我怎样才能做到这一点？我真的是JS的菜鸟。 :( 如果您需要其他信息，请不要犹豫。

Answer 1

只需为单选按钮和单选按钮所在的位置添加唯一ID（编号）。例如，

<td id=1><div class="form-item" id="edit-datetime-worker-wrapper">
         <label class="option" for="edit-datetime-worker">
         <input type="radio" id="edit-datetime-worker-1" name="datetime_worker" value="2011-12-06T08:00:00::3"   class="form-radio" />
          <span>6. 12. 2011 – 08:00</span></label>
          </div>
</td>

请注意，的唯一ID为1 ，单选按钮ID =“edit-datetime-worker- 1 ”相同。

现在，您可以使用 getattribute（） 功能获取单选按钮的唯一编号，并将该编号与该编号匹配，您现在可以在单击时添加类相应的单选按钮。

Answer 2

是否要根据选择的单选按钮突出显示列？ http://jsfiddle.net/rkw79/fYqME/

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

$('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/

$('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');
});

选中radiobutton后，选择表td的确切数量

2 个答案: