javascript - 更改 tr 的多个类 (HTML/JQUERY)

Question

我有多个

我正在尝试更改它们:

function changetr(e) {
if(e.className == 'tropen') {
    e.className = 'trclose';
} else {
    e.className = 'tropen';
}
}

function changetd(e) {
if(e.className == 'poolclose') {
    e.className = 'poolopen';
} else {
    e.className = 'poolclose';
}
}

我在图像上有一个 onchange:onclick="changetd(pool1);changetr(subpool1);"

但它只更改一个 tr 或 td，我想用该值更新所有 tr 或 td。

希望有人能找到解决方案，因为我对 jquery 还很陌生。

示例:

<table>
  <!-- Pool open-->
  <tbody>
    <tr class="tropen">
      <td>
        <table>
          <tbody>
            <tr>
              <td>
                <table>
                  <tbody>
                    <tr>
                      <td class="poolclose" id="poolid2" colspan="2" onclick="changetd(poolid2); changetr(subpool2);"></td>
                      <td>Test pool 2015</td>
                    </tr>


                    <!-- Subpool open-->
                  </tbody>
                </table>
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <table>
                          <tbody>
                            <tr class="trclose" id="subpool2">
                              <td>
                                <table>
                                  <tbody>
                                    <tr>
                                      <td width="12"></td>
                                      <td class="poolclose" id="subpoolid1" onclick="changetd(substitute1); changetr(subpoolid1);"></td>
                                      <td class="pooltext">test</td>
                                    </tr>
                                  </tbody>
                                </table>

                                <!-- Invallers -->
                                <table>
                                  <tbody>
                                    <tr>
                                      <td>
                                        <table>
                                          <tbody>
                                            <tr class="trclose" id="substitute1">
                                              <td>
                                                <table>
                                                  <tbody>
                                                    <tr>
                                                      <td width="26"></td>
                                                      <td class="poolclose" id="substituteid1" onclick="changetd(substituteid1); changetr(substitutelist1);"></td>
                                                      <td class="pooltext">Dit is een invaller</td>
                                                    </tr>
                                                  </tbody>
                                                </table>

                                                <!-- invaller overzicht -->
                                                <table>
                                                  <tbody>
                                                    <tr class="trclose" id="substitutelist1">
                                                      <td>
                                                        <table>
                                                          <tbody>
                                                            <tr>
                                                              <td width="40"></td>
                                                              <td class="substitutelist" id="substitutelistid1"></td>
                                                              <td>Dit is een lijst met invallers</td>
                                                            </tr>
                                                          </tbody>
                                                        </table>

                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                        <!--Invallers close-->

                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <!--Subpool close-->

                        <!-- Add a new record if there was no subpool to begin the while loop-->
                        <table>
                          <tbody>
                            <tr>
                              <td>
                                <table>
                                  <tbody>
                                    <tr class="trclose" id="subpool2">
                                      <td>
                                        <table>
                                          <tbody>
                                            <tr>
                                              <td width="12"></td>
                                              <td class="poolplus"></td>
                                              <td class="pooltext">
                                                <form action="/poolbeheer/poolonderdeel" method="post">
                                                  <input type="hidden" name="poolid" value="2">
                                                  <input type="text" name="subpoolname" required="">
                                                  <input type="submit" value="Poolonderdeel Koppelen">
                                                </form>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <!--Subpool close-->

                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <!--Pool close-->

    <!-- Pool open-->
    <tr class="tropen">
      <td>
        <table>
          <tbody>
            <tr>
              <td>
                <table>
                  <tbody>
                    <tr>
                      <td class="poolclose" id="poolid1" colspan="2" onclick="changetd(poolid1); changetr(subpool1);"></td>
                      <td>Test Pool</td>
                    </tr>


                    <!-- Subpool open-->
                  </tbody>
                </table>
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <table>
                          <tbody>
                            <tr class="trclose" id="subpool1">
                              <td>
                                <table>
                                  <tbody>
                                    <tr>
                                      <td width="12"></td>
                                      <td class="poolclose" id="subpoolid2" onclick="changetd(substitute2); changetr(subpoolid2);"></td>
                                      <td class="pooltext">test 2</td>
                                    </tr>
                                  </tbody>
                                </table>

                                <!-- Invallers -->
                                <table>
                                  <tbody>
                                    <tr>
                                      <td>
                                        <table>
                                          <tbody>
                                            <tr class="trclose" id="substitute2">
                                              <td>
                                                <table>
                                                  <tbody>
                                                    <tr>
                                                      <td width="26"></td>
                                                      <td class="poolclose" id="substituteid1" onclick="changetd(substituteid1); changetr(substitutelist1);"></td>
                                                      <td class="pooltext">Dit is een invaller</td>
                                                    </tr>
                                                  </tbody>
                                                </table>

                                                <!-- invaller overzicht -->
                                                <table>
                                                  <tbody>
                                                    <tr class="trclose" id="substitutelist1">
                                                      <td>
                                                        <table>
                                                          <tbody>
                                                            <tr>
                                                              <td width="40"></td>
                                                              <td class="substitutelist" id="substitutelistid1"></td>
                                                              <td>Dit is een lijst met invallers</td>
                                                            </tr>
                                                          </tbody>
                                                        </table>

                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                        <!--Invallers close-->

                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <!--Subpool close-->

                        <!-- Add a new record if there was no subpool to begin the while loop-->
                        <table>
                          <tbody>
                            <tr>
                              <td>
                                <table>
                                  <tbody>
                                    <tr class="trclose" id="subpool1">
                                      <td>
                                        <table>
                                          <tbody>
                                            <tr>
                                              <td width="12"></td>
                                              <td class="poolplus"></td>
                                              <td class="pooltext">
                                                <form action="/poolbeheer/poolonderdeel" method="post">
                                                  <input type="hidden" name="poolid" value="1">
                                                  <input type="text" name="subpoolname" required="">
                                                  <input type="submit" value="Poolonderdeel Koppelen">
                                                </form>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <!--Subpool close-->

                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <!--Pool close-->

  </tbody>
</table>

Answer 1

$(document).ready(function(){
   $("table td").click(function() {
       $("table td").toggleClass('tdopen tdclose');
    });
});

.tropen{
  background-color: red;
}

.trclose{
  background-color: blue;
}
.tdopen{
  background-color: red;
}

.tdclose{
  background-color: blue;
}
table{
border: 1px solid;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="tropen">
    <td class="tdopen">text text text</td>
    <td class="tdclose">text text text</td>
  </tr>
  <tr class="tropen">
    <td class="tdopen">text text</td>
    <td class="tdclose">text text</td>
  </tr>
  <tr class="tropen">
    <td class="tdopen">text</td>
    <td class="tdclose">text</td>
  </tr>
</table>