Início / coding / Perguntas / 77907598
Accepted
Jefferson
Asked: 2024-01-30 23:43:59 +0800 CST

Tabela toggleclass jquery

  • 772

Neste exemplo, tenho esse método onclick onde desejo alterar a linha de mais para menos. Também quero que todos os outros voltem ao plus padrão. Há alguma maneira de fazer isso?

$(document).ready(function() {
  collapsed();

});
var collapsed = function(e, counter) {
  $("#data  tr").each(function() {
    console.log('Data')
  });
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <td>
      <span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top" onclick="collapsed(this,1)"><i id="icon_1" class="fa fa-plus"></i></span>
  </tr>
  <td>
    <span class="btn tooltips btn-green" id="maincounter_2" data-maincounter="2" data-container="body" data-placement="top" onclick="collapsed(this,2)"><i id="icon_1" class="fa fa-plus"></i></span>
    </tr>
    <td>
      <span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top" onclick="collapsed(this,3)"><i id="icon_1" class="fa fa-plus"></i></span>
      </tr>
      <td>
        <span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top" onclick="collapsed(this,4)"><i id="icon_1" class="fa fa-plus"></i></span>
        </tr>
        <td>
          <span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top" onclick="collapsed(this,5)"><i id="icon_1" class="fa fa-plus"></i></span>
          </tr>
</table>

javascript

1 respostas

  1. Best Answer

    Algo assim pode ajudar você a começar:

    function handle_row_click(e){
  const row = e.target.closest('tr');
  const fa = row.querySelector(':scope > td > span > i.fa');
  if (fa.classList.contains('fa-plus') ){
    fa.classList.remove('fa-plus');
    fa.classList.add('fa-minus');
  } else if (fa.classList.contains('fa-minus') ){
    fa.classList.remove('fa-minus');
    fa.classList.add('fa-plus');
  }
}

    Demonstração:

    $(document).ready(function(){
   collapsed();
   $('table#data').click(handle_row_click);        
        
 });
 var collapsed = function (e,counter) {
   $("#data  tr").each(function () {
      //console.log('Data')
   });
};
function handle_row_click(e){
  reset_all_to_plus(e);
  const row = e.target.closest('tr');
  const fa = row.querySelector(':scope > td > span > i.fa');
  if (fa.classList.contains('fa-plus') ){
    fa.classList.remove('fa-plus');
    fa.classList.add('fa-minus');
  } else if (fa.classList.contains('fa-minus') ){
    fa.classList.remove('fa-minus');
    fa.classList.add('fa-plus');
  }
}
function reset_all_to_plus(e){
   if ( !e.target.classList.contains('fa-minus') ){ // ADDED THIS TEST
     document.querySelectorAll('table#data tr').forEach(row => {
         const fa = row.querySelector(':scope > td > span > i.fa');
         fa.classList.remove('fa-minus');
         fa.classList.add('fa-plus');
     });
   }
}
    td{border:1px solid red;}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="data">
<tr><td>
<span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top" ><i id="icon_1" class="fa fa-plus"></i></span>
</td></tr>
<tr><td>
<span class="btn tooltips btn-green" id="maincounter_2" data-maincounter="2" data-container="body" data-placement="top"><i id="icon_1" class="fa fa-plus"></i></span>
</td></tr>
<tr><td>
<span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top"><i id="icon_1" class="fa fa-plus"></i></span>
</td></tr>
<tr><td>
<span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top"><i id="icon_1" class="fa fa-plus"></i></span>
</td></tr>
<tr><td>
<span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top"><i id="icon_1" class="fa fa-plus"></i></span>
</td></tr>
</table>

    • 1

relate perguntas