Enable buttons in columns of a table with jquery

Asked

Viewed 318 times

1

I need to enable the row buttons of a table whose contents in the first column are equal to the value I have in a variable. I’ve tried many ways but it doesn’t work

Follows the code:

$("body").delegate('#btnFecharCaixaEditaEvento', 'click', function(event){
    event.preventDefault();
    var idEvento = 20;
    $('#tabEventos').find('tr').each( function(i,el){
        var identEvento = $(this).find('td').text();
        if( identEvento==idEvento ){
            $(this).eq(2).prop( 'disabled',false );
            $(this).eq(3).prop( 'disabled',false );
            return false;
        }
    });
});

and html:

<table id='tabEventos' class='table table-hover table-striped table-bordered table-responsive' >
    <thead>
        <tr>
            <th><b>ID</b></th>
            <th><b>Horário</b></th>
            <th class='text-center' colspan='2'><b>Equipamentos</b></th>
            <th class='text-center' colspan='2'><b>Serviços</b></th>
            <th><b>Observações</b></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='text-right'>10</td>
            <td>07:00-10:00</td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' data-toggle='modal' data-target='#cxEditaEquipRes' disabled='disabled'>Incluir</button></td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' id='viewEquipamentos'>Ver</button></td>
            <td>blablabla</td>
        </tr>
        <tr>
            <td class='text-right'>20</td>
            <td>07:00-10:00</td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' data-toggle='modal' data-target='#cxEditaEquipRes' disabled='disabled'>Incluir</button></td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' id='viewEquipamentos'>Ver</button></td>
            <td>blablabla</td>
        </tr>
        <tr>
            <td class='text-right'>30</td>
            <td>07:00-10:00</td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' data-toggle='modal' data-target='#cxEditaEquipRes' disabled='disabled'>Incluir</button></td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' id='viewEquipamentos'>Ver</button></td>
            <td>blablabla</td>
        </tr>
    </tbody>
</table>
javascript jquery table

1 answer

0


Two changes in your code:

  • uses 'td:first' to give you only the first element td
  • uses $(this).find('button').removeAttr('disabled'); to find that element button and .removeAttr() to remove the attribute.

Upshot:

$('#tabEventos').find('tr').each(function(i, el) {
    var identEvento = $(this).find('td:first').text();
    if (identEvento == idEvento) {
        $(this).find('button').removeAttr('disabled');
        return false;
    }
});

jsFiddle: https://jsfiddle.net/hq0756ye/

  • Hi Sergio. Thank you for the information. It gave right. It disables all buttons on the line. Now there is a way to disable the buttons of only one column range ? For example the buttons that are between column 7 to column 10 ?

  • @Francisco yes, when you use $(this).find('button').each(function(i within that .each I put in the answer, that i is the column number starting at 0. So you can create a if to verify this.

  • blz. Sergio. I will try to make the condition. Thanks again.

  • So Sergio. This i that you commented on is actually the line counter, to count the columns I did another each within the if: $(this). find('td'). each( Function(Indice){ if( Indice>=8 && Indice<=13 ){ $(this). find('button'). removeAttr('disabled'); } }); but your hints helped a lot. I’m just publishing the final code so I can help others with the same question. abs

Browser other questions tagged javascript jquery table

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