Know the nth of the item clicked to select an input in the same nth?

Navigation
2

I have a table where I have a checkbox to enable the editing of several items at the same time, that is, I can edit several since the input is selected, but I have a problem that if I want to edit only one does not need to select the checkbox. 

function selecionaCompromissos() {
  var ids = document.getElementsByClassName('agrupaPagto');
  
    gravaArray(ids);
  }

function gravaArray(dados) {
  var array_dados = dados;

  var teste = Array();
  var contador = 0;

  for (var x = 0; x <= array_dados.length; x++) {
    if (typeof array_dados[x] == 'object') {
      if (array_dados[x].checked) {
        teste[x] = array_dados[x].id;
        contador++;
      }
    }
  }
  teste = teste.filter(Boolean);  
  console.log(teste);
}
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Número</th>
      <th>Vencimento</th>
      <th>Parcela</th>
      <th>Valor</th>
      <th>Boleto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="agrupaPagto" id="10" value="125" name="txtAgrupa" type="checkbox"></td>
      <td>Art Pneus</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="2">343</a></td>
      <td>10/10/2017</td>
      <td>2 <b>de</b> 2<span style="color: red"> </span></td>
      <td>R$ 125,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos()">Pagar</a></span></td>
    </tr>
    <tr>
      <td><input class="agrupaPagto" id="11" value="221.00" name="txtAgrupa" type="checkbox"></td>
      <td>Maria Bonita</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="teste">532</a></td>
      <td>18/10/2017</td>
      <td>1 <b>de</b> 4<span style="color: red"> </span></td>
      <td>R$ 221,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos()">Pagar</a></span></td>
    </tr>
  </tbody>
</table>

The application works but has to be selected, but the question is if the user is only editing a row and selecting without the need to mark checkbox ?

    
asked by anonymous 09.11.2017 / 15:13

1 answer

1

You can get the checkbox of the line clicked with: 

elemento.closest('tr').getElementsByTagName('input')[0];

By analyzing your code, a suggestion is to pass the clicked link by sending a this as a parameter in the selecionaCompromissos() function, like this: 

<a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos(this)">Pagar</a>

In this way, the "element" quoted above would be this this received in the function as i : 

function selecionaCompromissos(i) {...

Then you can pass this information on to the other gravaArray() function by taking the id of its checkbox and creating the array with only 1 id . It would look like this: 

function selecionaCompromissos(i) {

   var idc = i.closest('tr').getElementsByTagName('input')[0];

   var ids = document.getElementsByClassName('agrupaPagto');

   gravaArray(ids,idc);
}

function gravaArray(dados,idc) {
   var array_dados = dados;

   var teste = Array();

   if(idc != null && !idc.checked){
      teste.push(idc.id);
   }else{
      var contador = 0;
      for (var x = 0; x <= array_dados.length; x++) {
         if (typeof array_dados[x] == 'object') {
            if (array_dados[x].checked) {
               teste[x] = array_dados[x].id;
               contador++;
            }
         }
      }
   }
   teste = teste.filter(Boolean);  
   console.log(teste);
}
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Número</th>
      <th>Vencimento</th>
      <th>Parcela</th>
      <th>Valor</th>
      <th>Boleto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="agrupaPagto" id="10" value="125" name="txtAgrupa" type="checkbox"></td>
      <td>Art Pneus</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="2">343</a></td>
      <td>10/10/2017</td>
      <td>2 <b>de</b> 2<span style="color: red"> </span></td>
      <td>R$ 125,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos(this)">Pagar</a></span></td>
    </tr>
    <tr>
      <td><input class="agrupaPagto" id="11" value="221.00" name="txtAgrupa" type="checkbox"></td>
      <td>Maria Bonita</td>
      <td><a class="tool_tip" href="#" data-toggle="tooltip" title="teste">532</a></td>
      <td>18/10/2017</td>
      <td>1 <b>de</b> 4<span style="color: red"> </span></td>
      <td>R$ 221,00</td>

      <td style="color:red; font-weight: bold;">Em aberto&nbsp;&nbsp;<span class="badge"><a href="#" data-toggle="modal" data-target="#modal_compromissos" onclick="selecionaCompromissos(this)">Pagar</a></span></td>
    </tr>
  </tbody>
</table>
    
09.11.2017 / 16:34
Error: Multiple controller types were found that match the URL Doubt about which Inheritance to use in the Entity Framework