javascript - jquery toggle <td> on click of a button - Stack Overflow

admin管理员组

文章数量:1386846

I have a table that has a few items inside, and a button for each that will display more information on the specific item on the menu.

my HTML table is below

<table id="menu_breads">
    <thead>
        <tr>
            <th colspan="2">BREADS</th>
        </tr>
        <tr>
            <th>ITEM</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Portugese Rolls
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R1.49</td>
        </tr>
        <tr>
            <td colspan="2" class="more">A hand made selection of Portugese rolls</td>
        </tr>
        <tr>
            <td>Hotdog Buns
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R0.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Hotdog buns</td>
            </tr>
        </tr>
        <tr>
            <td>French Loaf
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R3.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of French loaves</td>
            </tr>
        </tr>
        <tr>
            <td>Sead Roll
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Seed Rolls</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
    <thead>
        <tr>
            <th colspan="2">CONFECTIONARIES</th>
        </tr>
        <tr>
            <th>ITEM (per slice)</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cream Slice
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R12.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Cream slices</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Cake
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R15.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
            </tr>
        </tr>
        <tr>
            <td>Coconut Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R4.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>

My CSS is here

.myButton {
    background: #183C4C;
    border-radius: 31%;
    border:2px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:11px;
    text-decoration:none;
    width: 15%;
    float: right;
}

.more {
    display: none;
    }

Demo

and the jquery is what I am having a bit of a problem understanding. Would I need to ID every td that I want to display or can I do it with classes and an on click toggle event?

I have managed to get it to display on click, the problem is that all the hidden rows display and not just the individual one.

$(document).ready(function(){

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();

    if ($(this).closest('tr').is(":visible")) {
                $(this).html("&#x2C4")
        }
        else { 
            $(this).html("&#x2C5")
        }
});

});

I have a table that has a few items inside, and a button for each that will display more information on the specific item on the menu.

my HTML table is below

<table id="menu_breads">
    <thead>
        <tr>
            <th colspan="2">BREADS</th>
        </tr>
        <tr>
            <th>ITEM</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Portugese Rolls
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R1.49</td>
        </tr>
        <tr>
            <td colspan="2" class="more">A hand made selection of Portugese rolls</td>
        </tr>
        <tr>
            <td>Hotdog Buns
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R0.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Hotdog buns</td>
            </tr>
        </tr>
        <tr>
            <td>French Loaf
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R3.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of French loaves</td>
            </tr>
        </tr>
        <tr>
            <td>Sead Roll
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Seed Rolls</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
    <thead>
        <tr>
            <th colspan="2">CONFECTIONARIES</th>
        </tr>
        <tr>
            <th>ITEM (per slice)</th>
            <th>PRICE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cream Slice
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R12.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Cream slices</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Cake
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R15.99</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
            </tr>
        </tr>
        <tr>
            <td>Coconut Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R2.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
            </tr>
        </tr>
        <tr>
            <td>Chocolate Eclaire
                <button class="myButton">&#x2C5</button>
            </td>
            <td>R4.49</td>
            <tr>
                <td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
            </tr>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">
                 <h6>Prices may change without prior warning</h6>

            </td>
        </tr>
    </tfoot>
</table>

My CSS is here

.myButton {
    background: #183C4C;
    border-radius: 31%;
    border:2px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:11px;
    text-decoration:none;
    width: 15%;
    float: right;
}

.more {
    display: none;
    }

Demo

and the jquery is what I am having a bit of a problem understanding. Would I need to ID every td that I want to display or can I do it with classes and an on click toggle event?

I have managed to get it to display on click, the problem is that all the hidden rows display and not just the individual one.

$(document).ready(function(){

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();

    if ($(this).closest('tr').is(":visible")) {
                $(this).html("&#x2C4")
        }
        else { 
            $(this).html("&#x2C5")
        }
});

});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 7, 2015 at 9:50 asked May 7, 2015 at 8:44 user4796879user4796879 2

• 1 You can do it with class's, add your jQuery to the question. What you will be looking for tho is $(this) so it affects the class that was clicked and not all of them. – Ruddy Commented May 7, 2015 at 8:46
• 1 The problem with hiding a cell that it it can have an undesired effect; DEMO. I would remend hiding ether a column, or a row. – glend Commented May 7, 2015 at 8:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You wouldn't have to give IDs to every td, that'd be overkill. You want something dynamic. Assuming that your HTML structure will stay the same, you can do:

EDIT: Added the ability to toggle plus and minus icons from ments

$(".myButton").on("click", function () {
    var more = $(this).closest("tr").next("tr").find(".more");
    more.toggle();

    if (more.is(":visible")) {
       //show minus icon, hide plus
    }
    else {
       //show plus icon, hide minus
    }
});

DEMO (thanks Rory)

The more should be given to the tr - also your markup is not valid(you have a tr as child of tr - the more tr is child of the button tr)

    <tr>
        <td>Portugese Rolls
            <button class="myButton">&#x2C5</button>
        </td>
        <td>R1.49</td>
    </tr>
    <tr class="more">
        <td colspan="2">A hand made selection of Portugese rolls</td>
    </tr>

then

$('.myButton').click(function(){
    $(this).closest('tr').next().toggle();
})

Demo: Fiddle

---

If you don't want to change anything

$('.myButton').click(function(){
    $(this).closest('tr').next().find('.more').toggle();
})

Demo: Fiddle

Have you tried this:

$(".myButton").on("click",function() {
   $(this).closest("tr").toggle();
})

本文标签： javascriptjquery toggle lttdgt on click of a buttonStack Overflow