jQuery toggleClass example

Toggle class name on click in jQuery

by Shree Khanal

HTML

<table id="table-weapons">
   <thead>
     <tr>
       <th>Weapons</th>
       <th>Pericia</th>
       <th>Tipo</th>
       <th>Dano</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td><input type="text" size="28" class="nameWeapons"></td>
       <td>
         <select class="periciaWeapons">
           <option value="briga">Briga</option>
           <option value="machado">Machado</option>
           <option value="espadasCurtas">Espadas Curtas</option>
         </select>
       </td>
       <td><input type="text" size="10" class="tipoWeapons"></td>
       <td><input type="text" size="10" class="danoWeapons"></td>
       <td><button class="deleteBtn">X</button></td>
     </tr>
   </tbody>
 </table>

JavaScript

var weapons = document.querySelectorAll("#table-weapons tbody");
 weapons.forEach(function(weapon) {
   weapon.addEventListener('click', rollWeapons);
 });

 function rollWeapons() {
   let td = event.target;
   var tr = $(td).closest("tr");
   var cell = $(td).closest("tr").find(".periciaWeapons").val();
   console.log(cell);

 };