Question

以下是实现此目标的最佳方法是什么？

假设我的前端桌看起来像这样：

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

在初始加载时，它应该仅显示一个网址，但是当用户单击“更多”时，角色网址将显示所有数据，如下所示：

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

有什么好的方法可以做到这一点吗？注意，该角色网址可以包含更多网址，即它是动态增加的。

Answer 1

以下示例显示了如何向URL单元格中的跨度添加click事件。然后，这会切换父单元格中的类，该类根据当前状态显示/隐藏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>

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

1 个答案: