[英]Javascript: hide table column ondblclick
I have a table and I want to hide a column when I double click a column. 我有一个表,我想在双击列时隐藏列。
Code for hiding a column is practically all around SO. 用于隐藏列的代码几乎都在SO周围。 All I need is a hint on how/where to add the ondblclick event so I can retreive the identity of a
<td>
within a <table>
. 我只需要提示如何/在何处添加ondblclick事件,以便我可以在
<table>
检索<td>
的标识。
You can do this way: 你可以这样做:
<td ondblclick="this.style.display = 'none';">Some Stuff</td>
Here this
refers to current td
clicked. 这里
this
是指当前td
点击。
To go unobtrusive, you can do that easily using jQuery if you want: 为了不引人注目,你可以使用jQuery 轻松地做到这一点,如果你想:
$('#tableID td').dblclick(function(){
$(this).hide();
});
Here are two solutions that should work. 以下是两个应该有效的解决方案。 One done with jQuery and one with only standard Javascript.
一个用jQuery完成,一个用标准的Javascript完成。
http://jsfiddle.net/GNFN2/2/ 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';
}
}
}
}
With jQuery it is much cleaner. 使用jQuery它更清洁。 This method also uses event bubbling, so you don't need to bind an event handler to each table cell individually.
此方法还使用事件冒泡,因此您无需单独将事件处理程序绑定到每个表单元格。
http://jsfiddle.net/YCKZv/4/ 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();
});
}
});
Due to lack of answears I came up with a workaround, which is a big ugly, but it works fine. 由于缺乏回答,我提出了一个解决方法,这是一个很大的丑陋,但它工作正常。
On the window load event I decided to iterate the table and set each 's onclick event to call my show_hide_column function with the column parameter set from the iteration. 在窗口加载事件中,我决定迭代表并设置每个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 is a function that can be easily googled and the code is here: 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;
}
}
Note: my html only had one table so the code also assumes this. 注意:我的html只有一个表,所以代码也假定这一点。 If you have more table you should tinker with it a little.
如果你有更多的桌子,你应该稍微修补一下。 Also it assumes the table has table headers ();
它还假设表有表头();
Also I noted this to be an ugly approach as I was expecting to be able to extract the index of a table cell from the table without having to iterate it on load. 我还注意到这是一个丑陋的方法,因为我期望能够从表中提取表格单元格的索引,而不必在加载时迭代它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.