如果列可见（未隐藏），则将 link 设为粗体

Question

我有一个过滤器菜单，我将其放在 table 中，当单击其中一个 link 时，另一个单独的 table 中的相应列将被隐藏，直到link 再次点击。

<!-- Table for filter menu -->
    <table>
          <tr>
            <td>
              <a class="toggle-vis" data-column="1">hideColumn1</a> |
              <a class="toggle-vis" data-column="2">hideColumn2</a> |
              <a class="toggle-vis" data-column="3">hideColumn3</a>
            </td>
          </tr>
      <table>

<script>
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
        column.visible( ! column.visible() );
    } );=
</script>

我的目标是通过某种方式显示哪些列是 hidden/shown，因此在单击时，我希望 link 文本变为粗体或改变颜色或其他什么。我需要遍历我的 table 吗？我不知道 - HTML 非常新，所以感谢任何帮助，getElementById 似乎对我不起作用。

Answer 1

您可以使用 this 来获取被点击的元素，然后在此基础上修改其内联样式（或使用 class）。

内联样式

<!-- Table for filter menu -->
<table>
  <tr>
    <td>
      <a class="toggle-vis" data-column="1">hideColumn1</a> |
      <a class="toggle-vis" data-column="2">hideColumn2</a> |
      <a class="toggle-vis" data-column="3">hideColumn3</a>
    </td>
  </tr>
<table>

<script>
  $('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();
    // ADDED CODE
    var element = $(this);
    if (element.css('font-weight') === 'bold') {
      element.css({
        'font-weight': 'normal'
      });
    } else {
      element.css({
        'font-weight': 'bold'
      });
    }
    // END OF ADDED CODE
    // Get the column API object
    var column = table.column( $(this).attr('data-column') );
    column.visible( ! column.visible() );
  } );=
</script>

类

有了classes，这个就更简单了。将此添加到您的风格中：

.bold-link {
  font-weight: bold;
}

然后，只需使用这个函数：

<script>
  $('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();
    // ADDED CODE
    var element = $(this);
    element.toggleClass('bold-link');
    // END OF ADDED CODE
    // Get the column API object
    var column = table.column( $(this).attr('data-column') );
    column.visible( ! column.visible() );
  } );=
</script>

Answer 2

您可以将 class 添加到最后点击的 link（并删除之前的 class）。
在文件的开头。

<style>
.selected {
  font-weight: bold;
}
</style>

在函数中

$('a.selected').removeClass('selected');
$(this).addClass('selected');

还有你为什么打电话给e.preventDefault()？
是为了点击link什么都不做吗？
另一种方法是在 onclick 函数末尾为 link 和 return false 赋予 href="" 属性。

如果列可见（未隐藏），则将 link 设为粗体

Make link bold if column is visible (not hidden)

html

javascript

html-table

show-hide

内联样式

类