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