Show or hide table row if user clicks on it (HTML/JQuery)

问题

Im having a problem showing or hiding a table rows with jquery. I want that if user clicks on table row with id="jobtitle" then tr with class="texter" will show up or hide if already opened.

my code right now is:

<table>
    <tbody>
        <?php foreach($works as $w){ ?>
            <tr id="jobtitle" onclick="onPress()">
                <td>
                    <?php echo $w->title; ?>
                </td>
            </tr>
            <tr class="texter" style="display:none;">
                <td>
                    <?php echo $w->text; ?>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<script>
    function onPress(){
            var isHidden = $('.texter').is(":hidden");
            if (isHidden == true) {
                $(".texter").show();
                $("#colorized").css("background", "#06499d");
            } else {
                $('.texter').hide();
                $("#colorized").css("background", "#20669d");
            }
    }
</script>

So far all tr with class="texter" will expand. How to make that only one tr will toggle based on click on tr with class="jobtitle".

回答1:

Since I haven't got 50 rep I need to write an answer instead of a comment. It somehow evolved into a complete answer rather than just a comment.

First of all, I agree that using multiple IDs inside a single HTML document is wrong and also not allowed. He fixed that, which is nice. But I also think that using tables is NOT a big "nono" as someone called it above. Not always, at least.
Using a table as a table and not for layouting, is imo totally legit. But the OP just builds a single column table, where you actually wouldn't need a table. In this case, a better practice would be using <div> elements and remove inline CSS as followed:

<div class="wrap">
    <?php $num = 1; ?>
        <?php foreach($works as $w){ ?>
        <div id="colorized<?php echo $num; ?>" class="fromage">
            <div class="title">
                <?php echo $w->title; ?>
            </div>
            <div class="texter">
                <?php echo $w->text; ?>
            </div>
        </div>
        <?php $num++; ?>
    <?php } ?>
</div>

Then, I'd use the jQuery-method toggleClass(). Example:

$(document).ready(function(){
    $('.title').click(function(){
        $(this).parent().toggleClass("baguette");
    });
});

An let the CSS do the magic:

.texter {
    display: none;
}

.fromage {
    background: #06499d;
    cursor: pointer; /* to show it's clickable */
    padding: .5em; /* pure beauty */
    color: #fff; /* pure beauty */
}

.baguette .texter {
    display: block;
}

.baguette.fromage {
    background: #20669d;
}

Voilá!

JS Fiddle

回答2:

Is this what you are trying to do? If you click on id='jobtitle', the child with class='texter' will get shown.

$('#jobtitle').on('click', function(){
   $(this).find('.texter').show(); 
});

Or if id='jobtitle' has class='texter', show texter

$('#jobtitle').on('click', function(){
    if($(this).hasClass.('texter')){
        $(this).show();
    }
});

回答3:

This is my solution. It's not really nice but it works for now, until i will refactor whole code.

<table>
    <tbody>
      <?php $num = 1; ?>
        <?php foreach($works as $w){ ?>
          <tr id="colorized<?php echo $num; ?>" onclick="onPress(<?php echo $num; ?>)">
                <td>
                    <?php echo $w->title; ?>
                </td>
            </tr>
            <tr class="texter<?php echo $num; ?>" style="display:none;">
                <td>
                    <?php echo $w->text; ?>
                </td>
            </tr>
          <?php $num++; ?>
        <?php } ?>
    </tbody>
</table>

And JavaScript

function onPress(value){
        var isHidden = $('.texter'+value).is(":hidden");
        var id = "texter"+value;
    $(".texter"+value).fadeToggle();
        if (isHidden == true) {
            $(".id").show();
            $("#colorized"+value).css("background", "#06499d");
        } else {
            $(".id").hide();
            $("#colorized"+value).css("background", "#20669d");
        }
}

来源：https://stackoverflow.com/questions/28226141/show-or-hide-table-row-if-user-clicks-on-it-html-jquery

标签

javascript

php

jquery

html