不显示所有行信息（仅当我按“查看”时）

Question

我有一个奇怪的问题！我制作了一个简单的创建/删除备注表单和一个脚本来查询它们。但是如果有人插入一个100KM的音符并且表格显示全部，它就不会很漂亮。

我请你建议我一个脚本，只显示该行的一些内容，其余的当你按下“查看全部”这样的内容时。例如 ：

Answer 1

您需要考虑截断内容字符串，这里有大量基于JavaScript和PHP的解决方案的答案：

JavaScript：smart way to shorten long strings with javascript PHP：Shorten string with a "..." body

因此，您要显示截断的字符串，然后在完整视图中使用原始字符串。

根据示例中表的设置方式，您还可以尝试使用CSS截断并添加elipses。

CSS：http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Answer 2

好吧，我想你想要这样的东西： Live jsfiddle JS

$(function()
{
    var maxShow = 50;
   $( ".holder" ).each(function() 
   {
       var txt = $(this).text();
       txt = txt.substr(0,maxShow)+' ...';
       $(this).prev().prev().text(txt);
   });
  $(".show").click(function()
  {
      var txt = $(this).next('span').text();
      $(this).parent().text(txt);
  });
});

HTML

<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 0 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>
<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 1 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>
<div class='txt'><span class='summery'></span><a href="#" class="show">view</a><span class='holder'> 2 I have a strange question ! I made a simple create/delete notes form and a script to query them all.But it will not be beautiful if someone inserts a 100KM note and the table shows it</span></div>

CSS

.holder
{
  display:none;
}