javascript - Jquery基于index()和自定义attr问题的列切换

Question

我有一个表，其中标题第一行有两行，有 colspan，第二行有第二行标题，请参见下图

我有一个 jquery 函数，它从第二个标题行获取所有表格单元格值，并将其添加到带有复选框的 div 以及稍后用于切换的索引号。 第一列、第二列和第三列转到名为speed、cons、dest的单独 div

现在切换工作正常，它会检查列的索引号并向其添加隐藏内容，相应地，列跨度会减少以匹配表格格式。

但是每当单击第二列和第三列的第一个复选框时，表格就会中断，我试图找出问题所在，但无法使其工作。有什么建议吗？

这是fiddle请建议

下面是其中一个 div 的过滤器切换

$('.dest input[type=checkbox]').click(function() {
        var index = $(this).attr('index');

        $('.table thead .this_h th').eq(index).toggleClass('hidden');
        var hidden = $('.table thead th.hidden')
        $.each(hidden, function() {
            var idx = $(this).index() + 1;
            $.each($('.table tbody tr'), function() {
                $(this).find('td').eq(idx).hide();
            });
        });

        var visible = $('.table thead .this_h th:not(.hidden)');
        $.each(visible, function() {
            var idx = $(this).index() + 1;
            $.each($('.table tbody tr'), function() {
                $(this).find('td').eq(idx).show();
            });
        });

        var length = 0;
        var temp_name = '';
        $(".table thead tr:nth-child(2)").find('th').each(function(e, a) {

            if (temp_name == $(a).attr('name')) {
                    console.log($(a).attr('name'));
                if ($(a).is(':visible')) {
                    length = length + 1;
                }
            } 
            else 
            {
                    console.log(temp_name);
                $(".table thead tr:nth-child(1)").find("th[name=" + temp_name + "]").attr('colspan', length);

                if ($(a).is(':visible')) {
                    length = 1;
                    temp_name = $(a).attr('name');
                } else {
                    length = 0;
                }
            }

        })
    });

Answer 1

给你。

var tableArr = new Array();
var flag = 0;
var speed = new Array();
var speed_index = new Array();
var cons = new Array();
var cons_index = new Array();
var dest = new Array();
var dest_index = new Array();

// Gets the values from the table cell and creates the checkboxes
function get_values() {
  if (flag == 0) {
    flag = 1;
    $.each(speed, function(i) {
      $(".top-filter .speed").append('<input type=\'checkbox\' index=' + speed_index[i] + '>&nbsp;' + speed[i] + '<br/>');
    });
    $.each(cons, function(i, val) {
      $(".top-filter .cons").append('<input type=\'checkbox\' index=' + cons_index[i] + '>&nbsp;' + cons[i] + '<br/>');
    });
    $.each(dest, function(i, val) {
      $(".top-filter .dest").append('<input type=\'checkbox\' index=' + dest_index[i] + '>&nbsp;' + dest[i] + '<br/>');
    });
  }
};


$(document).ready(function() {

  // to push the values from cell to array
  $('.table thead tr:nth-child(2) th').each(function(e, a) {
    if ($(a).attr('name') == 'speed') {
      speed.push($(this).text());
      speed_index.push($(this).index());
    } else if ($(a).attr('name') == 'cons') {
      cons.push($(this).text());
      cons_index.push($(this).index());
    } else {
      dest.push($(this).text());
      dest_index.push($(this).index());
    }
  });
  get_values();


  $('input[type=checkbox]').click(function() {

    var index = $(this).attr('index');

    var name = $(this).parent().attr("class");

    $('.table thead .this_h th').eq(index).toggleClass('hidden');
    var hidden = $('.table thead th.hidden')
    $.each(hidden, function() {
      var idx = $(this).index() + 1;
      $.each($('.table tbody tr'), function() {
        $(this).find('td').eq(idx).hide();
      });
    });

    var visible = $('.table thead .this_h th:not(.hidden)');
    $.each(visible, function() {
      var idx = $(this).index() + 1;
      $.each($('.table tbody tr'), function() {
        $(this).find('td').eq(idx).show();
      });
    });

    var length = $(".table thead tr:nth-child(2)").find("th[name=" + name + "]").filter(':visible').length;

    if (length === 0) {
      $(".table thead tr:nth-child(1)").find("th[name=" + name + "]").addClass("hidden");
    } else {
      $(".table thead tr:nth-child(1)").find("th[name=" + name + "]").removeClass("hidden").attr('colspan', length);
    }

  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-condensed table-striped table-bordered">
    <thead>
        <tr>
            <th rowspan="2">Name</th>
            <th name="speed" colspan="3">1st Column</th>
            <th name="cons" colspan="4">2st Column</th>
            <th name="dest" colspan="3">3st Column</th>
        </tr>
        <tr class="this_h">
            <th name="speed">A</th>
            <th name="speed">B</th>
            <th name="speed">C</th>
            <th name="cons">D</th>
            <th name="cons">E</th>
            <th name="cons">F</th>
            <th name="cons">G</th>
            <th name="dest">H</th>
            <th name="dest">I</th>
            <th name="dest">J</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>22</td>
            <td>02</td>
            <td>05</td>
            <td>2</td>
            <td>52</td>
            <td>47</td>
            <td>22</td>
            <td>02</td>
            <td>05</td>
            <td>2</td>
        </tr>
    </tbody>
</table>
<div class="row top-filter">
    <div class="col-xs-3">
        <div class="speed">
        </div>
    </div>
    <div class="col-xs-3">
        <div class="cons">
        </div>
    </div>
    <div class="col-xs-3">
        <div class="dest">
        </div>
    </div>
</div>