Нужна помощь Скрытие или выцветание таблицы строк с помощью Javascript

Question

Привет, У меня нет навыков работы с Javascript, и мне нужно скрыть строку, используя флажок. Я сделал fiddle Но я понятия не имею, что делать. Скрытие ряда не было моим первым выбором, я бы предпочел, чтобы он был просто серым, но понятия не имел, что делать?

<div id="content"> 
<table id="questTable" style="max-width: 800px;"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Type</th> 
      <th>LvL</th> 
      <th>Name</th> 
      <th>Issuing NPC</th> 
      <th>Location</th> 
      <th>Done It?</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id="line1"> 
      <td class="shortTd">1</td> 
      <td class="shortTd"> 
       <img src="./images/Quests/Main_Scenario/mc.png" alt="" /> 
      </td> 
      <td class="shortTd">1</td> 
      <td> <a href="http://na.finalfantasyxiv.com/lodestone/playguide/db/quest/1da75996ae6/">Close to Home</a> 

      </td> 
      <td>Mother Miounne</td> 
      <td>New Gridania X: 11 Y: 13</td> 
      <td class="shortTd"> 
       <input class="completion" type="checkbox" id="checkbox1"> 
      </td> 
     </tr> 
     <tr id="line2"> 
      <td class="shortTd">2</td> 
      <td class="shortTd"> 
       <img src="./images/Quests/Main_Scenario/mc.png" alt="" /> 
      </td> 
      <td class="shortTd">1</td> 
      <td> <a href="http://na.finalfantasyxiv.com/lodestone/playguide/db/quest/de24c28bb95/">Close to Home</a> 

      </td> 
      <td>Baderon</td> 
      <td>Limsa Lominsa X: 11 Y: 11</td> 
      <td class="shortTd"> 
       <input class="completion" type="checkbox" id="checkbox2"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Использование чистого JS вы можете просто перебирать все строки и применить класс CSS, если установлен флажок

вар г = document.getElementsByClassName ("завершение")

for(var i = 0; i < g.length; i++){ 
    g[i].onclick = function(){ 
     this.parentElement.parentElement.className = this.parentElement.parentElement.className + ' gone' 
    } 
} 

где класс CSS уведенный

.gone { 
    -webkit-transition: opacity 500ms ease-in-out; 
    -moz-transition: opacity 500ms ease-in-out; 
    -ms-transition: opacity 500ms ease-in-out; 
    -o-transition: opacity 500ms ease-in-out; 
    transition: opacity 500ms ease-in-out; 
    opacity:0; 
} 

EG: https://jsfiddle.net/nw6kxqsq/

однако использование JQuery будет намного легче, и я рекомендую использовать его