How to dynamically select the inputs of a row

Question

I have a HTML table with multiple rows. These rows have a "Editar (Edit)" button. When this button is clicked multiple select inputs appears for the user to edit the fields of the row. I know how to make the inputs appear, but i don't know how to make the inputs appears dynamically for each row. If the user clicks on the first "Editar (Edit)" button only the inputs of the first row of the table should appear, when the user clicks on the second "Editar (Edit)" only the inputs of the second row of the table should appear and so on. How can i do that?

The JavaScript code that make the input appear:

let contr = document.getElementsByClassName('editar').length

for(jk = 0; jk < contr; jk++){
  document.getElementsByClassName('editar')[jk].addEventListener("click", function(event){
    let ia = 0;
    let ib = 0;
    let val = event.path[2].rowIndex * 5;
    let select = document.getElementsByClassName('selectTotal').length;
    let m = document.getElementsByClassName('editar');
    let mar = document.getElementsByClassName('editar').length;
    let mct = document.getElementsByClassName('campoId').lenght;
    let valCont = val * 4;
              for(ia = 0; ia < val; ia++){
                document.getElementsByClassName('selectTotal')[ia].style.display = 'block'
              }
              // for(ib = 0; ib < val; ib++){
              //   document.getElementsByClassName('selectTotal')[val].style.display = 'block'
              // }
})
}

The snippet is the following:

$(document).ready(function() {
  $('#sidebarCollapse').on('click', function() {
    $('#sidebar').toggleClass('active');
  });

});

let descricao = document.getElementsByClassName('descricao-menu');
let teste = document.getElementsByClassName("dropdown-menu");
let icone = document.getElementsByClassName('nav-item');


let myIndex1;
let myIndex2;

$(icone).on("mouseover", function(event) {
  myIndex1 = $(this).index();
})

$(teste).on("mouseover", function(event) {
  myIndex2 = $(this).index();
})

$(teste).hover(
  function() {
    for (let i = 0; i < descricao.length; i++) {
      descricao[myIndex1].style.display = 'block';
    }
  },
  function() {
    for (let i = 0; i < descricao.length; i++) {
      // descricao[myIndex1].style.display = 'none';
    }
  }
);

$(icone).hover(
  function() {
    for (let i = 0; i < descricao.length; i++) {
      descricao[myIndex1].style.display = 'block';
    }
  },
  function() {
    for (let i = 0; i < descricao.length; i++) {
      descricao[myIndex1].style.display = 'none';
    }
  }
);
////////////////////////////////////////////////////////////
let xvm = document.getElementsByClassName("removedor");
let k = 0
let y = document.querySelectorAll('td')
let ya = document.querySelectorAll('td').length
let z = document.querySelectorAll('th')
let za = document.querySelectorAll('th').length
let ta = document.querySelectorAll('tr').length
let restaurador = document.getElementsByClassName('restaurador');


for (let k = 0; k < za; k++) {
  let bodies = document.getElementsByTagName('tr').length
  let xvm = document.getElementsByClassName("removedor");
  let y = document.querySelectorAll('td')
  let ya = document.querySelectorAll('td').length
  let z = document.querySelectorAll('th')
  let za = document.querySelectorAll('th').length
  let restaurador = document.getElementsByClassName('restaurador');
  document.getElementsByClassName("removedor")[k].addEventListener("click", function(event) {
      z[k].style.display = "none";
      if(event.target.id == 'botaoId'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('zeroCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoPrioridade'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('primeiraCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoSetor'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('segundaCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoArea'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('terceiraCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoTipo'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('quartaCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoStatus'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('quintaCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoUrgencia'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('sextaCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoDesignado'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('setimaCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoDescrição'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('oitavaCol')[h].style.display = 'none'
        }
      } else if(event.target.id == 'botaoAcoes'){
        for(let h = 0; h < (ta - 1); h++){
          document.getElementsByClassName('nonaCol')[h].style.display = 'none'
        }
      }
    })
}

document.getElementsByClassName('restaurador')[0].addEventListener("click", function(){
  window.location.reload();
})

///////////////////////////////////////////////////////////
function fnExcelReport() {
  let xvm = document.getElementsByClassName("removedor");
  let k = 0
  let y = document.querySelectorAll('td')[k]
  let z = document.querySelectorAll('th')[k]
  var tab_text = "";
  var textRange;
  var j = 0;
  tab = document.getElementById('myTable'); // id of table
  tabRows = tab.rows; //get the rows

  // for (var i=0; i< tabRows.length; i++) {
  //   tabRows[i].deleteCell(-1);
  // }

  for (j = 0; j < tab.rows.length; j++) {
    tab_text = tab_text + tab.rows[j].innerHTML + "";
  }

  var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
  {
    txtArea1.document.open("txt/html", "replace");
    txtArea1.document.write(tab_text);
    txtArea1.document.close();
    txtArea1.focus();
    sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
  } else //other browser not tested on IE 11
    sa = window.open('data:application/vnd.ms-excel,' + escape(tab_text));

  return (sa);
}


let contr = document.getElementsByClassName('editar').length

for(jk = 0; jk < contr; jk++){
  document.getElementsByClassName('editar')[jk].addEventListener("click", function(event){
    let ia = 0;
    let ib = 0;
    let val = event.path[2].rowIndex * 5;
    let select = document.getElementsByClassName('selectTotal').length;
    let m = document.getElementsByClassName('editar');
    let mar = document.getElementsByClassName('editar').length;
    let mct = document.getElementsByClassName('campoId').lenght;
    let valCont = val * 4;
              for(ia = 0; ia < val; ia++){
                document.getElementsByClassName('selectTotal')[ia].style.display = 'block'
              }
              // for(ib = 0; ib < val; ib++){
              //   document.getElementsByClassName('selectTotal')[val].style.display = 'block'
              // }
})
}.alinhadora{
  position: relative;
}

.selectTotal{
  display: none;
}

textarea:focus {
  width: 300px;
  height: 300px;
}

textarea{
  display: none;
}

tbody{
  border-width: 0;
}

tr{
  min-height: 65px;
  height: 65px;
}

#botao-restaurador{
  margin: 10px;
}

.removedor{
  visibility: hidden;
  padding: 0;
  width: 20px;
  height: 20px;
  float: right;
}

th:hover #botaoId{
  visibility: visible;
}

th:hover #botaoPrioridade{
  visibility: visible;
}

th:hover #botaoPrioridade{
  visibility: visible;
}

th:hover #botaoSetor{
  visibility: visible;
}

th:hover #botaoArea{
  visibility: visible;
}

th:hover #botaoTipo{
  visibility: visible;
}

th:hover #botaoStatus{
  visibility: visible;
}

th:hover #botaoUrgencia{
  visibility: visible;
}

th:hover #botaoDesignado{
  visibility: visible;
}

th:hover #botaoDescrição{
  visibility: visible;
}

th:hover #botaoAcoes{
  visibility: visible;
}

#botao-restaurador{
  margin-bottom: 0;
}

#btnExport{
  margin-top: 10px;
}

#tabela-dentro{
  padding: 0;
  max-height: 100px;
  font-size: 12px;
}

#tabela-dentro #myTable .acoes-botao{
  margin: 1px 0;
  padding: 3px 1px;
  min-width: 20px;
}

.tooltip-wrap {
  position: relative;
}
.tooltip-wrap .tooltip-content {
  display: none;
  bottom: 5%;
  left: 5%;
  right: 5%;
  background-color: #fff;
  padding: .5em;
}
.tooltip-wrap:hover .tooltip-content {
  display: block;
}


      
      
      
        



              

              

              

              

          
            
              ID
              Prioridade
              Setor
              Área
              Tipo
              Status
              Urgência
              Designado/Terceiro
              Descrição
              Ações
            
          
          
            
                0
                
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Aberto
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Descrição Teste
                
                
                  
                  
                  
                  
                
              
            
            
                1
                
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Aberto
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Descrição Teste
                
                
                  
                  
                  
                  
                
              
            
            
                2
                
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Aberto
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Descrição Teste
                
                
                  
                  
                  
                  
                
              
            
            
                3
                
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Aberto
                
                
                  
                  
                  
                
                
                  
                  
                  
                
                
                  Descrição Teste

user_16636381 · Answer

Got it!

The following JavaScript works for the purpose i was looking for:

let contr = document.getElementsByClassName('editar').length;

for(jk = 0; jk < contr; jk++){
  document.getElementsByClassName('editar')[jk].addEventListener("click", function(event){
    let ia = 0;
    let ib = 0;
    let val = event.path[2].rowIndex;
    console.log(val);
    let select = document.getElementsByClassName('selectTotal').length;
    let m = document.getElementsByClassName('editar');
    let mar = document.getElementsByClassName('editar').length;
    let cellCount = document.getElementsByTagName('tr')[1].cells.length;
    let mct = document.getElementsByClassName('campoId').length;
              for(ia = 0; ia < val; ia++){
                for(ib = 0; ib < cellCount; ib++){
                  if(document.getElementsByTagName('tr')[val].cells[ib].lastElementChild == null){
                    continue
                  } else if(document.getElementsByTagName('tr')[val].cells[ib].lastElementChild.style.display == ''){
                    document.getElementsByTagName('tr')[val].cells[ib].lastElementChild.style.display = 'block'
                  }
                }
              }
})
}

How to dynamically select the inputs of a row

1 Answers