Отображение полного содержимого строки таблицы при щелчке мышью - PullRequest
0 голосов
/ 03 сентября 2018

У меня есть таблица на моей веб-странице с использованием таблиц данных. (https://datatables.net/). У меня очень длинные предложения в каждой ячейке столбца. Мне нужен способ, чтобы только при наведении курсора мыши или щелчке мышью все данные в ячейке должен отображаться.

скажите, пожалуйста, как я могу это сделать.

P.S. Я очень новичок в php javascript.

Это код, который я получил.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>            
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> 

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>

1 Ответ

0 голосов
/ 03 сентября 2018

Это не имеет ничего общего с PHP, больше CSS / Javascript. Возможно, у datatables есть опция для этого, пока не найдена. Но что вы могли бы сделать:

  1. В PHP, где вы строите содержимое ячеек, просто введите первые 5 слов. Остальные слова вы выводите между тегом <span> с классом hidden toggle.
  2. В CSS сделать класс .hidden{display:none;}
  3. Создайте функцию Javascript, которая запускается классом toggle, и она должна добавить или удалить класс hidden. Это покажет или скроет полное предложение.

В jQuery переключение класса очень просто, также вызывая функцию по щелчку.

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...