JavaScript自定义表列的能力.一个允许用户删除并添加新列的按钮

Question

我想使我的表可自定义。我正在寻找能够添加新列和删除现有列的能力。为了可视化我想做的事情，这是我的网站：https：//www.coinmarketstreet.com/。我想添加一个允许用户更改表布局的按钮。例如，如果用户想删除"优势"列并显示一个价格BTC列，则他可以通过单击按钮进行操作。

这是我的HTML表：

<table class="table coin_table">
    <tr class="header_row">
      <th><%= sortable "rank", "#" %></th>
      <th class="text-center">Symbol</th>
      <th class="text-center"><%= sortable "name", "Coin" %></th>
      <th class="text-center"><%= sortable "price", "Price" %></th>
      <th class="text-center"><%= sortable "percent_change_1h", "Change(1Hr)" %></th>
      <th class="text-center"><%= sortable "change_24hr", "Change(24Hr)" %></th>
      <th class="text-center"><%= sortable "percent_change_7d", "Change(7D)" %></i></th>
      <th class="text-center"><%= sortable "market_cap", "Market Cap" %></th>
      <th class="text-center"><%= sortable "volume_24hr", "24 Hr Volume" %></th>
      <th class="text-center"><%= sortable "current_supply", "Current Supply" %></th>
      <th class="text-center">Dominance</th>
    </tr>
    <% @cryptos.each do |crypto| %>
      <tr class="text-center" data-link="<%= crypto_path(crypto.id) %>">
        <th class="column_1"><%= crypto.rank %></th>
          <td><div><%= fetch_image_tag(crypto.symbol, :width => 50, :height => 50, :crop => :fill) %></div></td>
        <td class = "center_style2"><div><%= crypto.name %></div><div>(<%= crypto.nick_name %>)</div></td>
        <% if crypto.price == nil %>
           <td class="center_style">?</td>
        <% else %>
            <% if crypto.price < 1 %>
              <td class="center_style"><%= convert_number_currency(crypto.price, cookies[:selected_currency], 6) %></td>
            <% else %>
              <td class="center_style"><%= convert_number_currency(crypto.price, cookies[:selected_currency], 2) %></td>
            <% end %>
        <% end %>
        <% if crypto.percent_change_1h == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.percent_change_1h < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.percent_change_1h, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.percent_change_1h, precision: 2) %></td>
          <% end %>
        <% end %>
        <% if crypto.change_24hr == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.change_24hr < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.change_24hr, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.change_24hr, precision: 2) %></td>
          <% end %>
        <% end %>
        <% if crypto.percent_change_7d == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <% if crypto.percent_change_7d < 0 %>
            <td class="percent_change down center_style"><%= number_to_percentage(crypto.percent_change_7d, precision: 2) %></td>
          <% else %>
            <td class="percent_change up center_style"><%= number_to_percentage(crypto.percent_change_7d, precision: 2) %></td>
          <% end %>
        <% end %>
        <% if crypto.market_cap == nil %>
          <td class = "center_style">?</td>
        <% else %>
          <td class = "center_style"><%= convert_number_currency(crypto.market_cap, cookies[:selected_currency], 0) %></td>
        <% end %>
        <% if crypto.volume_24hr == nil %>
          <td class="center_style">$0</td>
        <% else %>
          <td class="center_style"><%= convert_number_currency(crypto.volume_24hr, cookies[:selected_currency], 0) %></td>
        <% end %>
        <% if crypto.current_supply == nil %>
          <td class="center_style">?</td>
        <% else %>
          <td class="center_style"><%= number_with_delimiter(crypto.current_supply, :delimiter => ',') + " " + crypto.nick_name %></td>
        <% end %>
        <td class="center_style"><%= number_to_percentage((crypto.market_cap / @market_cap_sum) * 100, precision: 2) %></td>
      </tr>
    <% end %>
</table>

我找不到一个简单的指南来执行此操作，因此，如果我可以指出正确的方向，那将不胜感激。另外，关于如何执行此操作的简单代码示例将受到更大的赞赏！

Answer 1

如果您想要一个更全面的解决方案，我也建议jQuery DataTables请参阅此信息

可以使用基本的HTML，CSS和jQuery轻松完成隐藏零件。也许这足以让您了解如何做自己想做的事情。在此示例中，我只是使用一个非常简单的表。

<style>
  .hidden {
  display: none;
}
</style>
<table>
  <tr class="header_row">
    <td class="column1", id="column1">col1</td>
    <td class="column2", id="column2">col2</td>
    <td class="column3", id="column3">col3</td>
  </tr>
  <tr>
    <td class="column1">col 1 stuff</td>
    <td class="column2">col 2 stuff</td>
    <td class="column3">col 3 stuff</td>
  </tr>
</table>
<script>
  $('tr td').click(function(){
    var toggleId = this.id;
    $('.'+toggleId).toggleClass('hidden');
  });
</script>

请参阅工作裸骨示例：https：//jsfiddle.net/a4rwgtdh/

Answer 2

我建议您使用DataTables jQuery插件进行调查。虽然它可能不会押注最终的可扩展解决方案，但开始更快地开始并弄清楚该功能是否是您的用户想要的东西。具体来说，有一个按钮数据台扩展程序，该扩展名允许最终用户修改表格为单元。如果您需要坚持用户的偏好，则可能必须自己写那部分。