需要帮助使用 Javascript 隐藏或淡化 Table 行

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 class

var g = document.getElementsByClassName("completion")

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

css class 消失的地方

.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;
}

例如： https://jsfiddle.net/nw6kxqsq/

但是使用 jQuery 会容易得多，我建议使用它

需要帮助使用 Javascript 隐藏或淡化 Table 行

Need Help Hiding or fading Table Row using Javascript

javascript

hide

fade