在表格单元格中显示更多/更少按钮(展开文本)


Show more/less button (expand text) in table cell

我有一个使用 PHP 填充的 html 表:

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

- <td><? echo $review['review']; ?></td> ' - 包含长文本片段,如果文本段超过 400 个字符,则需要使用显示更多/更少按钮进行短切。

我尝试使用我在互联网上找到的代码片段,但没有运气。我希望也许这里有人能为我指出正确的方向?我很乐意使用任何解决方案。

以下代码段是我需要使用的东西,但是我不确定如何在代码中实现它:http://jsfiddle.net/Wpn94/326/

(--我以前问过类似的问题,但没有回应。我现在已经改变了问题并再次发布它--)

在下面的代码中,我更新了 HTML 以包含多个查看和使用表。http://jsfiddle.net/3VTb7/

javascript无法工作的结构是这样的:

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

注意:您必须具有隐藏内容类。显示更多div 应紧跟在要隐藏的内容之后,并包含显示更多类。

如果不查看您尝试混合在一起的代码,我无法确定还有什么问题。

这可能是一个错误:<td><? echo $review['overall']; }}?></td>由于您正在循环表行,因此}应该追逐</tr>

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

要回答问题,也许是这样的:

首先,如果您有review_id使用,否则请在if ($r = $db->prepare("...之前添加$id = 0;

将评论一分为二..

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

然后使用 jQuery 切换

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