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

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

名称
复习
评级

-

'-包含多段文本，如果文本超过400个字符，则需要使用“显示更多/更少”按钮将其缩短

我曾尝试使用在互联网上找到的代码片段，但没有成功。我希望这里有人能给我指出正确的方向？我很乐意使用我能使用的任何解决方案

下面的代码是我需要使用的东西，但是我不确定如何在代码中实现它：

---

（-我以前问过类似的问题，但没有回答。我现在更改了问题并再次发布了它--

在下面的代码中，我更新了HTML以包含多个审阅和使用表。

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类。show more div应该直接位于要隐藏的内容之后，并包含show more类

---

如果不看一下您试图混合在一起的代码，我就无法确定还有什么可能是错误的

这可能是一个错误：

由于正在循环表行，

}

应该在

之后

然后使用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)
    });
});

---

那太完美了。这几周一直在寻找，非常感谢！

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

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