как удалить указанные строки таблицы в jQuery - PullRequest
Новая
       28

как удалить указанные строки таблицы в jQuery

0 голосов
/ 26 февраля 2012

У меня есть таблица с заголовком и несколько строк.Каждая строка имеет свою собственную группу, и иногда они могут быть похожи на предыдущие коды групп.
Кроме того, у меня есть раскрывающийся список, который содержит идентификаторы групп.Я хочу показать только строки, которые равны текущему значению раскрывающегося списка.
Например, это моя таблица id="myTable": enter image description here

, и это мой раскрывающийся список: 

<select id="groups" name="groups">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

Мне нужно удалить 2-ю и 3-ю строку, когда пользователь меняет текущий выбранный элемент раскрывающегося списка на 1. Как я могу это сделать с помощью jQuery?

Ответы [ 3 ]

2 голосов
/ 26 февраля 2012

Примерно так: 

$("#groups").change(function() {
    var currentGroup = $(this).val();
    $("#myTable tr").each(function() {
       if (this.rowIndex==0) return; // skip heading
       if ($(this).children("td").eq(-1).text() == currentGroup)
          $(this).show();
       else
          $(this).hide();
    });
});​

Демо: http://jsfiddle.net/DBCcF/1/

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

0 голосов
/ 26 февраля 2012

Есть несколько способов сделать это.Самым простым будет небольшое изменение структуры таблицы, так как нам нужен способ поиска groupid в таблице.Что вы можете сделать, это просто добавить класс в ячейки, которые содержат groupid, например: 

<tr>
    <td>1</td>
    <td>Jack</td>
    <td class='groupId'>1</td>
</tr>

Затем вы напишите свой javascript, похожий на другие ответы, за исключением того, что вам не нужно будет использовать негибкие методы, такие как nth-child(3) или eq(-1).Это сделало бы javascript более гибким для изменения.

В итоге вы могли бы получить что-то вроде этого: 

function hideRows(){
    // find selected value (get only the first as multi-selected is not required)
    var selected = $('#groups option:selected')[0].value;
    // walk through all cells that have the groupId class
    $('#myTable td.groupId').each(function(){
        // get current cell
        var currentCell = $(this);
        // get the cells groupid
        var groupid = currentCell.text();
        // determine if it the group id matches the selected value and hide/show
        if(groupid !== selected){
            currentCell.parent().hide();
        }
        else{
            currentCell.parent().show();
        }
    }); 
}
// wire-up select change event
$('#groups').change(hideRows);

Без какого-либо способа изолировать ячейки groupid в таблице, вам придется прибегнуть к помощи.к одному из вышеупомянутых методов, чтобы получить правильный столбец.

JSFiddle - http://jsfiddle.net/GFzcp/5/

0 голосов
/ 26 февраля 2012 
$("#groups").on("change", function() {
    var rowNum = $(this).val();
    $("#myTable tr")
        .show()
        .each(function() {
            var $this = $(this).find("td:nth-child(3)");
            if ($this.text() !== rowNum) {
                $this.closest("tr").hide();
            }
        });
});​

Демо .

Это позволит проверить значение выбранного элемента в сравнении с содержимым каждой третьей ячейки в каждой строке.Если он не совпадает, он скрывает его.

...