最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - Show moreless button (expand text) in table cell - Stack Overflow

matteradmin5PV0评论

I have a html table that is populated using PHP:

<table class="flat-table flat-table-1" width="100%">

<tr style="background-color:#FFF;">
    <td class="table-head">Name</td>
    <td class="table-head">Review</td>
    <td class="table-head">Rating</td>
</tr>

<?php
//run a query to find all the fields in the review table that belong to the specific hall, using the id in the url ($current_id)
if ($r = $db->prepare("SELECT * FROM reviews WHERE hall_id = :current_id")) {
    //bind the parameters used in the above query using the 'current_id' variable
    $r->bindParam(':current_id', $current_id);
    //Execute the prepared query
    $r->execute(); 

    //search review table for all fields and save them in $review
    $reviewtemp = $r->fetchAll();
    foreach( $reviewtemp as $review) {

    //loop and output the reviews
?>

<tr>
<td><? echo $review['name'];?></td>
<td><? echo $review['review']; ?></td>
<td><? echo $review['overall']; }}?></td>
</tr>
</table>

The - <td><? echo $review['review']; ?></td>' - contains longs pieces of text that need to be shorted using a show more/less button, if the piece of text is over 400 characters.

I have tried using pieces of code I have found on the internet but have had no luck. I am hoping that maybe somebody on here can point me in the right direction? I am happy to use any solution I can.

The following piece of code is the kind of thing I need to use, however I am unsure how to implement it into my code: /

(--I have previously asked a similar question before but had no responses. I have now changed the question and have posted it again--)

I have a html table that is populated using PHP:

<table class="flat-table flat-table-1" width="100%">

<tr style="background-color:#FFF;">
    <td class="table-head">Name</td>
    <td class="table-head">Review</td>
    <td class="table-head">Rating</td>
</tr>

<?php
//run a query to find all the fields in the review table that belong to the specific hall, using the id in the url ($current_id)
if ($r = $db->prepare("SELECT * FROM reviews WHERE hall_id = :current_id")) {
    //bind the parameters used in the above query using the 'current_id' variable
    $r->bindParam(':current_id', $current_id);
    //Execute the prepared query
    $r->execute(); 

    //search review table for all fields and save them in $review
    $reviewtemp = $r->fetchAll();
    foreach( $reviewtemp as $review) {

    //loop and output the reviews
?>

<tr>
<td><? echo $review['name'];?></td>
<td><? echo $review['review']; ?></td>
<td><? echo $review['overall']; }}?></td>
</tr>
</table>

The - <td><? echo $review['review']; ?></td>' - contains longs pieces of text that need to be shorted using a show more/less button, if the piece of text is over 400 characters.

I have tried using pieces of code I have found on the internet but have had no luck. I am hoping that maybe somebody on here can point me in the right direction? I am happy to use any solution I can.

The following piece of code is the kind of thing I need to use, however I am unsure how to implement it into my code: http://jsfiddle/Wpn94/326/

(--I have previously asked a similar question before but had no responses. I have now changed the question and have posted it again--)

Share Improve this question edited Jun 30, 2018 at 10:02 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 3, 2014 at 21:14 JoeMorganJoeMorgan 1431 gold badge1 silver badge12 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

In the following code, I updated the HTML to contain more than one review and use tables. http://jsfiddle/3VTb7/

The structure that is impotant for the javascript to work is this:

<table>
<tr><td>Name</td></tr>
<tr><td><div class="content hidecontent">insanely long review here</div><div class="show-more"><a href="#">Show More</a></div><td></tr>
</table>

Note: You must have the hidecontent class. The show more div should be directly after the content you want to hide and include the show-more class.

Without looking at the code you tried to mix together, I cannot determine what else can be wrong.

This might be an error: <td><? echo $review['overall']; }}?></td> Since you're looping the table rows, } should go after </tr>

<tr>
<td><? echo $review['name'];?></td>
<td><? echo $review['review']; ?></td>
<td><? echo $review['overall']; ?></td>
</tr>
<?php }} ?>

To answer question, maybe something like:

First, if you have review_id use that otherwise add $id = 0; before if ($r = $db->prepare("...

Split review into two..

<td><?php
    $review = $review['review'];
    $short_length = 200;
    $short = substr($review, 0, $short_length);
    $long = substr($review, $short_length);
    $id++;
    echo $short . '<span class="content hidecontent" id="review'.$id.'">'.$long.'</span>
            <a href="javascript:" class="showmoreless" data-id=".$id.'">Show More</a>';
?></td>

Then use jQuery to toggle

$("#hidecontent").click(function(){
    var reviewid = "#review"+$(this).data("id");
    $(reviewid).slideToggle(500, function(){
        var moreless = $(reviewid).is(":visible") ? 'Less' : 'More';
        $(this).html("Show "+moreless)
    });
});
Post a comment

comment list (0)

  1. No comments so far