lundi 20 mars 2017

find next tbody in the same table and hide only the next ones

I have a table:

<table cellpadding="0" cellspacing="0" border="0">
                            <thead>
                                <tr>
                                    <th>Kurs</th>
                                    <th>Datum</th>
                                    <th>Zeit</th>
                                    <th>Ort</th>
                                    <th>Anmeldung</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0" id="dates">
                        <tbody role="dategroup">
                            <tr class="table-1_2">
                                <td>Grundkurs 1</td>
                                <td>9. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td rowspan="2">
                                    <input type="checkbox" id="gk1_2"> </td>
                            </tr>
                            <tr class="table-1_2">
                                <td>Grundkurs 2</td>
                                <td>10. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                            </tr>
                            <tr class="table-2a">
                                <td>Grundkurs 2a</td>
                                <td>11. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk2a"> </td>
                            </tr>
                            <tr class="table-gk3">
                                <td>Grundkurs 3</td>
                                <td>11. Mai 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk3"> </td>
                            </tr>
                        </tbody>
                        <tbody role="dategroup">
                            <tr class="table-1_2">
                                <td>Grundkurs 1</td>
                                <td>9. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td rowspan="2">
                                    <input type="checkbox" id="gk1_2"> </td>
                            </tr>
                            <tr class="table-1_2">
                                <td>Grundkurs 2</td>
                                <td>10. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                            </tr>
                            <tr class="table-2a">
                                <td>Grundkurs 2a</td>
                                <td>11. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk2a"> </td>
                            </tr>
                            <tr class="table-gk3">
                                <td>Grundkurs 3</td>
                                <td>11. Juni 2017</td>
                                <td>08:00 - 12:00</td>
                                <td>Wallisellen</td>
                                <td>
                                    <input type="checkbox" id="gk3"> </td>
                            </tr>
                        </tbody>
                    </table>

When clicking a checkbox within a tbody, all other tbody should disapear, when unchecked, they should be visible again.

I tried the following jquery, but without result:

$(document).ready(function () {
     $("input[type=checkbox]").on('click', function () {
     $(this).next('table').find('tbody').addClass('hide')
     })
})

And further, when in the visible tbody...

  1. ...checkbox "gk1_2" the row "table-2a" should disapear
  2. ...checkbox "gk2a" is checked, the row "table-1_" should disapear and checkbox "gk3" should be forced as checked. (3)
  3. ...checkbox "gk3" is checked no action required.

I know is complicated, I tried several options but without success. Very thankful if someone could help me with this problem.

Cheers, Luca




Aucun commentaire:

Enregistrer un commentaire