Question

我有一个包含大约30列的表格，其目的是让用户选择要隐藏或显示的列。这样做的原因是让他们选择在打印时哪些列可见。

为了解决这个问题，我为每一列分配了一个类名，并且我使用了jQuery的切换功能。这工作正常，但我想知道是否有更好的方法来实现它比我目前使用的更有效和更清洁。我为每一列都有一个单独的函数，我的代码如下所示：

的jQuery

function tablecolumn1toggle(){
    $(".column1").toggle();
}

function tablecolumn2toggle(){
    $(".column2").toggle();
}

function tablecolumn3toggle(){
    $(".column3").toggle();
}

HTML 简化切换列1 切换列2 切换第3列

    <table class="table table-bordered" id="points_table">
     <tbody>
     <tr>
        <th class="column1>Route</th>
        <th class="column2">Location</th>
        <th class="column3>Track</th>
     </tr>
     </tbody>
     </table>

依旧......

我使用按钮来调用每个切换功能，一旦我有基本代码工作，我将使用复选框。那么，有没有办法减少代码量？

编辑：谢谢大家的答案，选择一个答案真的很难，但我很感激您的所有意见。

Answer 1

稍微添加一些内容，但添加一个替代方案：如果您有多种此类设置并且您不想每次都添加类，则可以显示或隐藏类似{{1 }}。特别是如果您将来更改列顺序，类方法可能会让您感到困惑。

更进一步，不是事先定义复选框，而是让JQuery动态创建它们。这在维护页面时也更容易，并且在创建输入对象时可以分配列索引，而不必在设计时添加任何特殊属性。

总而言之，html会尽可能轻（没有类或属性），也不必维护。在div中添加复选框的示例：

$('tr *:nth-child(' + (ColumnIndex + 1) + ')', table).toggle();

Fiddle

Answer 2

如果您想使用复选框动态执行此操作，请将数据属性添加到复选框

<input class='toggleColumns' type="checkbox" data-target="column1" />
<input class='toggleColumns' type="checkbox" data-target="column2" />
<input class='toggleColumns' type="checkbox" data-target="column3" />
<input class='toggleColumns' type="checkbox" data-target="column4" />

然后在复选框上添加更改事件：

$('.toggleColumns').on('change', function (e) {
    // get the target for this checkbox and toggle it
    var tableColumn = $(e.currentTarget).data('target');
    $('.' + tableColumn).toggle();
});

这是工作小提琴：https://jsfiddle.net/9Ls49w97/

Answer 3

你传递数字1,2,3功能

试试这个

function tablecolumn1toggle(id){
$(".column"+id).toggle();
}

这样的函数调用

tablecolumn1toggle(1); or
tablecolumn1toggle(2); or
tablecolumn1toggle(3);

OR

 function tablecolumn1toggle(colum_name){
$(colum_name).toggle();
}

这样的函数调用

tablecolumn1toggle(column1); or
tablecolumn1toggle(column2); or
tablecolumn1toggle(column3);

Answer 4

/* number is a parameter now */
function tablecolumntoggle(i){
    $(".column"+i).toggle();
}

/* example to iteratly call */
for (var i = 1; i <= 3; i++) {
  tablecolumntoggle(i);
};

Answer 5

这是使其更简单的一种方法。

为每个按钮指定一个data-col值，匹配的列元素具有相同的data-col值，然后可以在一个简单的函数中配对它们：

<button data-col='column1'>toggle</button>
<button data-col='total'>toggle</button>
<button data-col='other'>toggle</button>
<div class="col" data-col="column1">
   column 1
</div>
<div class="col" data-col="total">
   total column
</div>
<div class="col" data-col="other">
   other
</div>

和代码

$(function() {
  $("button[data-col]").on("click", function() {
      var col = $(this).data("col");
      $(".col[data-col='" + col + "']").toggle();
  });
})

简单的小提琴演示：https://jsfiddle.net/bb1mm0cp/

Jquery使用更好的方法切换表列

5 个答案: