Picking rows from a table by a value with Jquery

Asked

Viewed 1,623 times

3

I have a table, with a select, in each row, and by clicking a button I want to get all the items in the table where the select option be of value.

<table id="myTable">
<span class="result"></span>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Status</th>
        <tr>
    </thead>
    <tbody>
    <tr>
        <td>xyz</td>
        <td>
            <select>
                <option class="op" value="0">-- Selecione --</option>
                <option class="op" value="1">-- Bloqueado --</option>
                <option class="op" value="2">-- Ativo --</option>
            </select>
        </td>
        </tr><tr>
        <td>abc</td>
        <td>
            <select>
                <option value="0">-- Selecione --</option>
                <option value="1">-- Bloqueado --</option>
                <option value="2">-- Ativo --</option>
            </select>
        </td>
        </tr>
    </tbody>
</table>
<span class="status"></span>
<button class="row" id="btnAdicionar" type="button" >Adicionar</button>

How can I sweep this my table and get all the items that are with select other than 0 ?

javascript jquery html

  • Show what you’ve done...

  • @Gabrielkatakura already put the code, I have no idea how to do in jquery.

  • $("#myTable option[value!="0"]"), this will select all elements with different values of "0"..

  • @Marllonnasser but how do I get the value? For example, I mean if the ABC line is BLOCKED status. As I pass line by line, saying this ta active, this ta blocked... ?

  • you want all values, of all lines, that have different status of locked?

2 answers

2

<table id="myTable">
<span class="result"></span>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Status</th>
        <tr>
    </thead>
    <tbody>
        <td>xyz</td>
        <td>
            <select>
                <option class="op" value="0">-- Selecione --</option>
                <option class="op" value="1">-- Bloqueado --</option>
                <option class="op" value="2">-- Ativo --</option>
            </select>
        </td>
        <td>xyz</td>
        <td>
            <select>
                <option value="0">-- Selecione --</option>
                <option value="1">-- Bloqueado --</option>
                <option value="2">-- Ativo --</option>
            </select>
        </td>
        ...
    </tbody>
</table>
<span class="status"></span>
<button class="row" id="btnAdicionar" type="button" >Adicionar</button>

Below we create a simple search line for the field returning value other than 0
Jquery

var names = $("select > option[value!=0]").text();

$(".status").text(names);

jsfiddle

  • does not work, this example it ta getting ALL the items from select, and not only the ones that are selected.

2


Here is a suggestion:

$('#btnAdicionar').on('click', function() {
    // gera coleção jQuery, converte para nativa com ".get()"
    var selectsAtivos = $('select').filter(function() {
        return this.value == '2';
    }).get();

    // usando array nativa
    var tds = selectsAtivos.reduce(function(arr, el) {
        var tr = $(el).closest('tr'); // aqui procura o "tr" pai do select
        return arr.concat(tr.find('td').get()); // aqui vai buscar os "td" que estão dentro do "tr" que encontrámos na linha de cima
    }, []);
    $(tds).css('color', 'red'); // só para o exemplo, aqui mudam de côr os selecionados.
});

jsFiddle: https://jsfiddle.net/3zfLo10c/

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.