Таблица показать / скрыть столбцы

Question

У меня есть типичная таблица,

7 столбцов, (разбито на страницы по 100 строк за раз).

То, что я хочу сделать, это иметь <select multiple="multiple"> и перечислить всестолбцы на основе имени соответствуют <th></th>, затем я хочу подключиться к событию select onchange, когда происходит изменение, скрыть все столбцы, которые не выделены, для каждого скрытого столбца уменьшить диапазон значений<tfoot> на 1.

Структура таблицы:

<table>
 <thead>
  <tr>
    <th>first</th>
    <th>second</th>
    <th>third</th>
    <th>fourth</th>
    <th>fifth</th>
    <th>sixth</th>
    <th>seventh</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td colspan="7"></td>
  </tr>
 </tfoot>
</table>

, и я подозреваю, что окончание выбора будет выглядеть так:

<select multiple="multiple">
 <option value="1" selected="selected">first</option>
 <option value="2" selected="selected">second</option>
 <option value="3" selected="selected">third</option>
 <option value="4" selected="selected">fourth</option>
 <option value="5" selected="selected">fifth</option>
 <option value="6" selected="selected">sixth</option>
 <option value="7" selected="selected">seventh</option>
</select>

Answer 1

Вот рабочий пример: Ссылка JSFiddle

И вот краткое описание кода, как это сделать:

<table class="editable_table">
 <thead>
  <tr>
    <th>first</th>
    <th>second</th>
    <th>third</th>
    <th>fourth</th>
    <th>fifth</th>
    <th>sixth</th>
    <th>seventh</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
   <td>5</td>
   <td>6</td>
   <td>7</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td class="footer" colspan="7">This is the footer</td>
  </tr>
 </tfoot>
</table>
<select multiple="multiple">
 <option value="1" selected="selected">first</option>
 <option value="2" selected="selected">second</option>
 <option value="3" selected="selected">third</option>
 <option value="4" selected="selected">fourth</option>
 <option value="5" selected="selected">fifth</option>
 <option value="6" selected="selected">sixth</option>
 <option value="7" selected="selected">seventh</option>
</select>

И javascript:

function hideCol($table, myIndex){
    $table.find("tr").each(function(){
        $(this).find("th:eq("+myIndex+"), td:eq("+myIndex+")").not('.footer').hide();
    });
}

function showCol($table, myIndex){
    $table.find("tr").each(function(){
        $(this).find("th:eq("+myIndex+"), td:eq("+myIndex+")").not('.footer').show();
    });
}

$("select").change(function(){
    var $table = $(".editable_table"),
        cols = $(this).val();
    for (var i = 1; i <= $table.find("th").length; i++){
        if (cols.indexOf(i+'') === -1) {
            hideCol($table, i-1);
        } else {
            showCol($table, i-1);
        }
    }
    $table.find("tfoot td").attr('colspan', cols.length);
});

Поскольку ваш вопрос был довольно расплывчатым, я полагаю, это то, что вы хотели.В любом случае, это должно сработать!

PS - может быть, не самый эффективный способ сделать это - но рассмотрите возможность повышения эффективности, как говорится, упражнение для читателя .

Answer 2

http://jsfiddle.net/96G7N/

Позаботьтесь о граничных условиях (например, отменив выбор всех параметров)

$(document).ready(function(){

    $(".table-column-selector").change(function(){
        var selectedCols = $(this).val();
        var cols = $("table.tableClass thead th").length;

        var footer = $("table.tableClass tfoot tr td");

        footer.attr("colspan", selectedCols.length);

        for (col = cols - 1 ; col >= 0 ; col--) {
            var columns = $("table.tableClass tbody tr td:nth-child(" + (col + 1) + ")");
            var headers = $("table.tableClass thead tr th:nth-child(" + (col + 1) + ")");

            if ($.inArray( col + 1 + "", selectedCols ) != -1) {
               columns.show();
               headers.show();
            }
            else {
                columns.hide();
                headers.hide();
            }
        }
    })
});

Answer 3

Вот как я это сделаю, http://jsfiddle.net/pxfunc/mFmjb/2/

jQuery:

// setup re-usable variables
var $myGrid = $('#myGrid'),
    $colFilter = $('#columnFilter'),
    optionElementTemplate = "<option value=\"{0}\">{0}</option>";    

// iterate the <th> tags to build the multi-select box
$('th', $myGrid).each(function() {
    // create a jquery object to append from the optionElementTemplate and the <th> text
    $colFilter.append($(optionElementTemplate.replace(/\{0\}/g, $(this).text())));
});

$colFilter.change(function() {
    // store count for footer
    var count = 0;

    // show all columns
    resetTable();

    // iterate over the select options for selected values
    $('option', this).each(function() {
        if(!$(this).attr("selected")) {
            count++;
            hideColumn($(this).index());
        }
    });

    // adjust the colspan
    adjustFooter($('option', this).length - count);
});

function resetTable() {
    $('#myGrid td, #myGrid th').show();
    $('#myGrid tfoot td').attr("colspan", $('#columnFilter option').length);
}

function hideColumn(index) {
    $('#myGrid thead th:eq(' + index + ')').hide();
    $('#myGrid tbody td:eq(' + index + ')').hide();
}

function adjustFooter(count) {
    $('#myGrid tfoot td').attr("colspan", count);
}

Возможно, потребуется некоторая тонкая настройка, прежде чем запускать это в производство, но функциональность есть.