Не показывать всю информацию о строке (только когда я нажимаю просмотр)

У меня странный вопрос! Я сделал простую форму создания/удаления заметок и скрипт для запроса их всех. Но это не будет красиво, если кто-то вставит заметку о 100 км, а таблица покажет все это.

Пожалуйста, предложите мне скрипт, который показывает только часть содержимого строки, а остальное при нажатии что-то вроде "просмотреть все". Например :

введите здесь описание изображения


rows html tabular
person Ion Farima    schedule 06.01.2013    source источник
comment
Проверьте мой ответ. надеюсь помочь   -  person Siamak A.Motlagh    schedule 06.01.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно изучить усечение строки содержимого, здесь есть множество ответов для решений на основе JavaScript и PHP:

JavaScript: умный способ сократить длинные строки с помощью javascript
PHP: Сократить строку с расширением . .. тело

Таким образом, вы сначала показываете усеченную строку, а затем в полном представлении используете исходную строку.

В зависимости от того, как настроена ваша таблица в примере, вы также можете попробовать использовать CSS для усечения и добавить многоточие.

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

person diggersworld    schedule 06.01.2013
comment
Хорошо.. это отлично работает с css.. Спасибо и извините, но я не знал, что писать в строке поиска: D - person Ion Farima; 06.01.2013

arrow_upward
1
arrow_downward

Ну, я думаю, вам нужно что-то вроде этого:
Живой 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;
}
person Siamak A.Motlagh    schedule 06.01.2013
comment
Да ! Что-то вроде этого, но я бы предпочел использовать CSS;) Спасибо - person Ion Farima; 06.01.2013