Как добавить кнопку «Читать дальше» в столбце таблицы

Question

Какой лучший способ добиться этого ниже?

Предположим, что моя таблица переднего плана выглядит следующим образом:

id  | usernname | role url
 1  | JHON      | /welcome... readmore

При начальной загрузке должна отображаться только одна ссылка, но когда пользовательнажмите на ссылку «читать дальше, чем на роль», чтобы показать все данные, подобные этим:

id  | usernname | role url
 1  | JHON      | /welcome ,/addnew ,/product, /purchase

Есть ли какой-нибудь хороший способ добиться этого? Примечание URL этой роли может содержать больше URL, т. Е. Он динамически увеличивается.

Answer 1

В приведенном ниже примере показано, как добавить событие щелчка в диапазон в ячейке URL.Затем он переключает класс в родительской ячейке, который показывает / скрывает URL-адреса в зависимости от текущего состояния.Это зависит от того, загружаете ли вы два пролета, один со сжатыми URL-адресами, а второй со всеми URL-адресами.

Я добавил несколько стилей, чтобы помочь пользователю понять интерактивность.

Альтернатива - вместо загрузки двух диапазонов (что требует добавления / приветствия дважды), вы можете создать диапазон только с классом .long с дополнительными URL-адресами.Это показано в строке 2 с именем пользователя b.date.

Обновление: добавлена ​​кнопка, которая запускает тайм-аут для динамического добавления URL-адресов, если вы добавляете URL-адрес, вам следует добавить класс кродительский элемент td, чтобы он знал, что имеет несколько URL-адресов, позволит вам показать ссылку показать больше / меньше.Он добавляет его, используя уникальную строку id, которую я добавил.

Дайте мне знать, если это не то, что вы хотели.

// Add click event to each element with class toggle-more
// This is dynamic, so will work on any new 'show more'
$('#user-list').on('click', '.toggle-more', function(){

  // toggle 'more' class in the closest parent table cell
  $(this).closest("td").toggleClass("more");

  // Change text of link
  if ($(this).text() == "show more") {
    $(this).text("show less");
  } else {
    $(this).text("show more");
  }

});


// Click event to start adding URLs
$("#addURL").click( function() {
  addURL();
  $(this).remove();
});


// Add a new URL
function addURL() {

  // Add a new URL, you will have to select the appropriate row in real use - i.e. replace #user-1 with a unique row identifier
  $("#user-1 .url-list .toggle-more").before("<span class='url long'> ,/newURL</span>");
  
  // Add a class to the table cell so we know there are multiple URLs, again you will need to replace #user-1 with your unique row identifier. 
  $("#user-1 .url-list").addClass("multi-url");
  
  // Continue adding URLs
  var addURLtimer = setTimeout(addURL, 3000);
  
}

td .long {
  display: none;
}

td.more .long {
  display: inherit;
}

td.more .short {
  display: none;
}

.url, .toggle-more {
float: left;
}

.url {
padding-left: 4px;
}

.toggle-more {
  display: none;
  padding-left: 4px;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.multi-url .toggle-more {
 display: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid black;
}

th, td {
padding: 4px;
text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="user-list">

  <tr>
    <th>
      id
    </th>
    <th>
      username
    </th>
    <th>
      role url
    </th>
  </tr>

  <tr id="user-0">
    <td>
      0
    </td>
    <td>
      j.smith
    </td>
    <td class="url-list multi-url">
      <span class="short url">/ welcome</span>
      <span class="long url"> /welcome ,/addnew ,/product, /purchase</span> <a class="toggle-more">show more</a>
    </td>
  </tr>

  <tr id="user-1">
    <td>
      1
    </td>
    <td>
      b.times
    </td>
    <td class="url-list">
      <span class="url">/ welcome</span>
      <span class="toggle-more">show more</span>
    </td>
  </tr>

</table>


<button id="addURL">Start Adding URLs</button>