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

admin管理员组

文章数量:1434916

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--)

• javascript
• php
• jquery
• html-table

Share Improve this question Follow edited Jun 30, 2018 at 10:02 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 3, 2014 at 21:14 JoeMorganJoeMorgan 14311 gold badge11 silver badge1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: 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)
    });
});

本文标签： javascriptShow moreless button (expand text) in table cellStack Overflow