时间戳

首页 > 解决方案 > 如何在表格列中添加阅读更多或更少按钮

javascript - 如何在表格列中添加阅读更多或更少按钮

问题描述

在下面实现这一目标的最佳方法是什么？

假设我的前端表如下所示：

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

在初始加载时，它应该只显示一个 url，但是当用户单击 read more 时，角色 url 会显示所有数据，如下所示：

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

有什么好的方法可以实现这一目标吗？请注意，此角色 url 可以包含更多 url，即它是动态增加的。

标签： javascriptjqueryhtmldatatable

解决方案

下面的示例显示了如何将单击事件添加到 URL 单元中的范围。然后，这会切换父单元格中的一个类，该类根据当前状态显示/隐藏 URL。这依赖于您加载两个跨度，一个包含压缩 URL，一个包含所有 URL。

我添加了一些样式来帮助用户理解交互性。

替代方案- 无需加载两个跨度（这需要您添加 /welcome 两次），您可以创建一个仅.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>

推荐阅读