[英]Javascript: hide table column ondblclick
我有一個表,我想在雙擊列時隱藏列。
用於隱藏列的代碼幾乎都在SO周圍。 我只需要提示如何/在何處添加ondblclick事件,以便我可以在<table>
檢索<td>
的標識。
你可以這樣做:
<td ondblclick="this.style.display = 'none';">Some Stuff</td>
這里this
是指當前td
點擊。
為了不引人注目,你可以使用jQuery 輕松地做到這一點,如果你想:
$('#tableID td').dblclick(function(){
$(this).hide();
});
以下是兩個應該有效的解決方案。 一個用jQuery完成,一個用標准的Javascript完成。
// 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它更清潔。 此方法還使用事件冒泡,因此您無需單獨將事件處理程序綁定到每個表單元格。
// 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();
});
}
});
由於缺乏回答,我提出了一個解決方法,這是一個很大的丑陋,但它工作正常。
在窗口加載事件中,我決定迭代表並設置每個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只有一個表,所以代碼也假定這一點。 如果你有更多的桌子,你應該稍微修補一下。 它還假設表有表頭();
我還注意到這是一個丑陋的方法,因為我期望能夠從表中提取表格單元格的索引,而不必在加載時迭代它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.