Highlight selected row of table

Question

Highlight selected row of table

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I have a table where I select a Checkbox to enable a particular input. I would like that when I select this same checkbox, the entire row of the table would be highlighted, showing that the user selected that row.

var cbs = document.getElementsByClassName('cb');

function cbClick() {
  var input = document.querySelector('input[data-id="' + this.getAttribute('data-id') + '"]:not([type="checkbox"])');
  input.disabled = !this.checked;
}

for (var i in cbs) {
  cbs[i].onclick = cbClick;
}

<table class="table" border="1">
  <thead>
    <tr>
      <td></td>
      <th>CAMPO</th>
      <th>INFORMAÇÃO ATUAL</th>
      <th>INFORMAÇÃO CORRETA</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DtNascimento">
      </td>
      <td>Data de Nascimento</td>
      <td>11/11/1111</td>
      <td>
        <input type="text" data-id="DtNascimento" disabled class="form-control datapicker" name="DtNascimento" id="DtNascimento">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DsEstadoCivil">
      </td>
      <td>Estado Civil</td>
      <td>Solteiro</td>
      <td>
        <input type="text" data-id="DsEstadoCivil" disabled class="form-control" name="DsEstadoCivil">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DsOcorrencia">
      </td>
      <td>Grau de Instrução</td>
      <td>Segundo Grau Completo</td>
      <td>
        <input type="text" data-id="DsOcorrencia" disabled class="form-control" name="DsOcorrencia">
      </td>
    </tr>
  </tbody>
</table>

javascript jquery

asked by anonymous 19.02.2015 / 17:50

2 answers

1

I do not quite understand the reason for your jQuery mix with pure JS, but anyway I think this will solve:

$(input).closest('tr').css('background', '#e1e1e1');

19.02.2015 / 17:54

How to get the ID of an element inside a div? How to create a jQuery function to pull the menu up?

score 3 · Accepted Answer

A pure Javascript alternative:

Comments in the code

var cbs = document.getElementsByClassName('cb');

function cbClick() {
  var input = document.querySelector('input[data-id="' + this.getAttribute('data-id') + '"]:not([type="checkbox"])');
  input.disabled = !this.checked;

    // parentNode.parentNode = td > tr subindo a hierarquia
    if(this.checked) {
        // muda a cor do fudo quando for marcado
        input.parentNode.parentNode.style.background = '#e1e1e1'; 
    } else {
        // remove a cor do fundo ao desmarcar
        input.parentNode.parentNode.style.background = '';
    }
}

for (var i in cbs) {
  cbs[i].onclick = cbClick;
}

<table class="table" border="1">
  <thead>
    <tr>
      <td></td>
      <th>CAMPO</th>
      <th>INFORMAÇÃO ATUAL</th>
      <th>INFORMAÇÃO CORRETA</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
          <input type="checkbox" class="cb" data-id="DtNascimento" />
      </td>
      <td>Data de Nascimento</td>
      <td>11/11/1111</td>
      <td>
          <input type="text" data-id="DtNascimento" disabled class="form-control datapicker" name="DtNascimento" id="DtNascimento" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="cb" data-id="DsEstadoCivil">
      </td>
      <td>Estado Civil</td>
      <td>Solteiro</td>
      <td>
          <input type="text" data-id="DsEstadoCivil" disabled class="form-control" name="DsEstadoCivil" />
      </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" class="cb" data-id="DsOcorrencia" />
      </td>
      <td>Grau de Instrução</td>
      <td>Segundo Grau Completo</td>
      <td>
          <input type="text" data-id="DsOcorrencia" disabled class="form-control" name="DsOcorrencia" />
      </td>
    </tr>
  </tbody>
</table>