Подсчет количества «выбранных» ячеек таблицы в столбце с помощью jQuery - PullRequest
Новая
       25

Подсчет количества «выбранных» ячеек таблицы в столбце с помощью jQuery

0 голосов
/ 13 июля 2011

У меня есть таблица с 5 столбцами, где мне нужно, чтобы пользователь "выбирал" и "отменял выбор" ячеек. Затем мне нужно сохранить промежуточный итог количества ячеек в каждой КОЛОННЕ, как «выбранных».

Я выбираю ячейки с помощью простой функции переключения, меняя класс ячейки 

$('td').toggle(function() {
 $(this).addClass("selectedCell");
 }, function() {
 $(this).removeClass("selectedCell");
});

Итак, я предполагаю, что мне нужно получить все ячейки в каждом столбце, текущий класс которого «selectedCell», и назначить его 5 переменным, чтобы я мог отобразить «вы выбрали 3 элемента из столбца 4» (например) .

Как мне лучше всего это сделать?

1 Ответ

5 голосов
/ 13 июля 2011

Не уверен, как ваша таблица настроена для обработки «столбцов», но чтобы получить общее количество выбранных ячеек в таблице, используйте это: 

$('table').find('td.selectedCell').length

Пример: http://jsfiddle.net/AlienWebguy/tYT2E/

Если вы изменили настройку таблицы на структуру div, было бы намного проще рассчитать, что вам нужно:

HTML: 

<div id="wrapper">
    <div class="column">
        <div class="selectedCell">1</div>
        <div>2</div>
        <div class="selectedCell">3</div>
        <div class="selectedCell">4</div>
        <div>5</div>
        <div>6</div>
        <div class="selectedCell">7</div>
    </div>
    <div class="column">
        <div class="selectedCell">8</div>
        <div class="selectedCell">9</div>
        <div>10</div>
        ..........
    </div>
</div>
<div id="status"></div>

JQuery: 

function update_counts(){
    $('#status').html('');
    $('.column').each(function(index){
       $('#status').append($(this).find('.selectedCell').length + ' selected cells in column ' + (index + 1) + '<br />');
    }); 
}

$('.column div').click(function(){

    // Add or remove class
    $(this).toggleClass('selectedCell');

    // Update the class counts
    update_counts();

});

// Run the function on domready
$(function(){
    update_counts();
});

Пример: http://jsfiddle.net/AlienWebguy/tYT2E/4/

...