按下按钮时获取td序列

时间:2017-04-02 14:41:41

标签: javascript jquery html html-table

我已经制作了一个表,每个td中有一个按钮,每个tr中有4个td,我想在按下相应的按钮时得到td的序列,但我得到序列0-4,因为父级在下一个之后发生了变化行。有没有办法从0-11获得按钮序列。这是我的jQuery代码。

$('.act-butn').on('click', function() {
        var btnClicked = $(this).parent().index();
        $('.activity1').text(btnClicked); 
});

这是我的表

<table class="beta" width=443 id="logButtons">
  <center>
    <tr>
      <td><input type='button' name='Production' value='Production' id="actB1" class="act-butn" /></td>
      <td> <input type='button' name='Break' value='Break' id="actB2" class="act-butn" /></td>
      <td> <input type='button' name='Medical' value='Medical' class="act-butn" /></td>
      <td> <input type='button' name='Comfort Break' value='Comfort Break' class="act-butn" /></td>
    </tr>
    <tr>
      <td> <input type='button' name='Meeting' value='Meeting' class="act-butn" /></td>
      <td> <input type='button' name='Training' value='Training' class="act-butn" /></td>
      <td> <input type='button' name='Business Improvement' value='Bus. Improvement' class="act-butn" /></td>
      <td> <input type='button' name='Idle' value='Idle' class="act-butn" /></td>
    </tr>
    <tr>
      <td> <input type='button' name='Downtime' value='Downtime' class="act-butn" /></td>
      <td> <input type='button' name='Follow up' value='Follow up' class="act-butn" /></td>
      <td> <input type='button' name='one-to-one' value='one to one' class="act-butn" /></td>
      <td> <input type='button' name='Coaching' value='Coaching' class="act-butn" /></td>
    </tr>
  </center>
</table>

请建议更改。

1 个答案:

答案 0 :(得分:1)

如果您想获取<input>索引,则需要收集所有这些输入的集合以进行索引

var $inputs = $('.act-butn').on('click', function() {
     // index of `this` in `$inputs` collection
     var btnClicked = $inputs.index(this);
     $('.activity1').text(btnClicked); 
});

或者,如果您想根据点击的输入在<td><td>索引:

var $td = $('.act-butn').on('click', function() {         
     var btnClicked = $td.index( $(this).parent() );
     $('.activity1').text(btnClicked); 
}).parent();

DEMO