单击鼠标隐藏表格列

Question

我有一个表格，我想在双击某列时隐藏某列。

隐藏列的代码几乎遍布 Stack Overflow。我所需要的只是关于如何/在何处添加

ondblclick

事件的提示，以便我可以检索

<td>

中

<table>

的身份。

Answer 1

这里有两个可行的解决方案。一种使用 jQuery 完成，一种仅使用标准 Javascript。

http://jsfiddle.net/GNFN2/2/

// Iterate over each table, row and cell, and bind a click handler
// to each one, keeping track of which column each table cell was in.
var tables = document.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
    var rows = tables[i].getElementsByTagName('tr');
    for (var j = 0; j < rows.length; j++) {
        var cells = rows[j].getElementsByTagName('td');
        for (var k = 0; k < cells.length; k++) {
            // Bind our handler, capturing the list of rows and colum.
            cells[k].ondblclick = column_hide_handler(rows, k);
        }
    }
}

// Get a click handler function, keeping track of all rows and
// the column that this function should hide.
function column_hide_handler(rows, col) {
    return function(e) {
        // When the handler is triggered, hide the given column
        // in each of the rows that were found previously.
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].getElementsByTagName('td');

            if (cells[col]) {
                cells[col].style.display = 'none';
            }
        }
    }
}

使用 jQuery 就干净多了。此方法还使用事件冒泡，因此您不需要将事件处理程序单独绑定到每个表格单元格。

http://jsfiddle.net/YCKZv/4/

// Bind a general click handler to the table that will trigger
// for all table cells that are clicked on.
$('table').on('dblclick', 'td', function() {
    // Find the row that was clicked.
    var col = $(this).closest('tr').children('td').index(this);
    if (col !== -1) {
        // Go through each row of the table and hide the clicked column.
        $(this).closest('table').find('tr').each(function() {
            $(this).find('td').eq(col).hide(); 
        });
    }
});

Answer 2

你可以这样做：

<td ondblclick="this.style.display = 'none';">Some Stuff</td>

这里

this

指的是当前点击的

td

。

工作示例

为了不引人注目，如果您愿意，您可以使用 jQuery 轻松做到这一点：

$('#tableID td').dblclick(function(){
  $(this).hide();
});

Answer 3

由于缺乏答案，我想出了一个解决方法，虽然很丑陋，但效果很好。

在窗口加载事件中，我决定迭代表并设置每个表的 onclick 事件，以使用迭代中设置的列参数来调用我的 show_hide_column 函数。

window.onload = function () {
  var headers = document.getElementsByTagName('th');
  for (index in headers) {
    headers[index].onclick = function (e) {
      show_hide_column(index, false)
    }
  }
}

show_hide_column 是一个可以轻松通过谷歌搜索的函数，代码在这里：

function show_hide_column(col_no, do_show) { 
  var stl; 
  if (do_show) stl = 'table-cell' 
  else stl = 'none';

  var tbl  = document.getElementById('table_id');
  var rows = tbl.getElementsByTagName('tr');
  var headers = tbl.getElementsByTagName('th');

  headers[col_no].style.display=stl;

  for (var row=1; row<rows.length; row++) {
    var cels = rows[row].getElementsByTagName('td')
    cels[col_no].style.display=stl;
  }
}

注意：我的html只有一张表，所以代码也假设这一点。如果你有更多的桌子，你应该稍微修改一下。它还假设表格有表格标题 ();

我还指出这是一种丑陋的方法，因为我期望能够从表中提取表单元格的索引，而不必在加载时迭代它。

Answer 4

如果你想隐藏该列，你可以使用 css 和 jquery 使用第 n 个子元素来隐藏表的整个列：

$('table td').dblclick(function(){
    $('td:nth-child('+($(this).index()+1)+')').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
<tr><td>one</td><td>one</td><td>one</td></tr>
<tr><td>two</td><td>one</td><td>one</td></tr>
<tr><td>three</td><td>one</td><td>one</td></tr>
</table>

如果你的桌子有一个TH，你也需要防止点击这个：

$('table td').dblclick(function(){
    $('th:nth-child('+($(this).index()+1)+')').hide();
    $('td:nth-child('+($(this).index()+1)+')').hide();
});
$('table th').dblclick(function(){
    $('th:nth-child('+($(this).index()+1)+')').hide();
    $('td:nth-child('+($(this).index()+1)+')').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
<tr><th>COL1</th><th>COL2</th><th>COL3</th></tr>
<tr><td>one</td><td>one</td><td>one</td></tr>
<tr><td>two</td><td>one</td><td>one</td></tr>
<tr><td>three</td><td>one</td><td>one</td></tr>
</table>