How do I change a row in the data table when I select it?

Question

How do I change a row in the data table when I select it?

Navigation

#1 by (1 votes)

0

In this code I can select it and in the console.log have access to the information, but I do not know how to change it:

    $(document).ready(function () {
    var oTable = $('#tableproduct').DataTable();

    $('#tableproduct tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
        var pos = oTable.row(this).index();
        var row = oTable.row(pos).data();
        console.log(row);
    })
});

I need to change the readOnly property from true to false of the input when selecting the line.

javascript jquery datatable

asked by anonymous 18.10.2018 / 22:12

1 answer

I can not use Pseudo-classes in css Queuing function in C

score 1 · Accepted Answer

I do not know the structure of your table, but it should look something like this:

$(document).ready(function () {
    var oTable = $('#tableproduct');

    $('#tableproduct tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
        
        let inputs = this.getElementsByTagName('input');

        for (let input of inputs) {
          input.readOnly = false;
        } 
       
        console.log(this);
        
    })
});

.selected{
  background-color: #c0c0c0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="tableproduct" class="table">
	<thead>
		<tr>
			<th>Código</th>
            <th>Cor</th>
            <th>Tamanho</th>
			<th>Quantidade</th>
            <th style="width:25%">% do estoque total</th>
			<th>Ação</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>100</td>
			<td>Azul</td>
		    <td>M</td>
		    <td><input type="text"></td>
			<td></td>
			<td><span style="cursor: pointer;" class="label label-success">Lançam .manual</span></td>
		</tr>
										
	</tbody>
</table>