在表格单元格中显示更多/更少按钮（展开文本）答案

【问题标题】：Show more/less button (expand text) in table cell在表格单元格中显示更多/更少按钮（展开文本）
【发布时间】：2018-06-30 18:02:55
【问题描述】：

我有一个使用 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/

（--我之前也问过类似的问题，但没有回复。我现在已经更改问题并再次发布--）

【问题讨论】：

标签： javascript php jquery html-table

【解决方案1】：

在以下代码中，我更新了 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>

注意：您必须具有 hidecontent 类。显示更多 div 应该直接在您要隐藏的内容之后并包含显示更多类。

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

【讨论】：

那是完美的。这周一直在找，非常感谢！

【解决方案2】：

这可能是一个错误：<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)
    });
});

【讨论】：