jQuery中的表不起作用,但外部表示不起作用

时间:2014-06-13 20:45:30

标签: jquery html-table

查询中的表不起作用。使用外表时代码中没有问题。

的JavaScript

    <script type="text/javascript">
    $('.user').each(function(){
        var parent = this,
            group = $('.group', parent);
        $('.selectMe', parent).on('change', function(){
            var indis = $(':selected', this).index();
            if ( indis > 0 ){
                indis -= 1;
                group.hide().filter(':eq(' + indis + ')').fadeIn(300);
            } else {
                group.hide();
            }
        });
    });

    </script>

HTML

<style>
  .group {
    display: none;
    padding: 10px;
    border: 1px solid #ddd
  }

</style>

<table>
  <tr>
    <td>

      <div class="user">
        <select class="selectMe">
          <option value="">select</option>
          <option value="1">one</option>
          <option value="2">two</option>
        </select>

    </td>


    <td>

      <div class="group">
        one
      </div>

      <div class="group">
        two
      </div>
    </td>
  </tr>
</table>

我确切地知道我犯了什么错误。如何在表中使用jQuery我需要做出安排

1 个答案:

答案 0 :(得分:1)

表格单元格中有一个未完成的div.user。您正试图在该容器中找到.selectMe等 - 但该容器内部没有任何这些项目。他们在其他细胞内。

考虑将user类移到表格本身,并删除部分<div>标记,例如

<table class="user"> 
  <tr>
  <td>

    <select class="selectMe">
      <option value="">select</option>
      <option value="1">one</option>
      <option value="2">two</option>
    </select>
  </td>

  <td >

    <div  class="group" >
      one
    </div>

    <div class="group" >
      two
    </div>
  </td>
  </tr>
</table>