用於切換表格單元格的可見性的Javascript

我有一個創建html報告的代碼。用於切換表格單元格的可見性的Javascript

它使用html表格來顯示結果，表格是可排序的，並且它們是自動斑馬條紋的，所以已經有Javascript和它的全部嵌入式內聯，以便該文件可以簡單地與其用戶共享。

我對Javascript沒有很好的理解，而且這樣做已經夠難了。然而，現在的一個問題是，有時一些單元格中有很多數據。然而，這是設計，我希望找到一個優雅的解決方案。

我想要的是一個Javascript函數或一套功能，我可以按下我的表中的任何單元格並使其切換可見性。

換句話說 - 有一個包含許多單元行和列的表格。當用戶按下一個單元格時，其內容是不可見的，所以表格的其餘部分將自行重新調整大小。因此 - 具有許多行內容的單元格重新調整行高度，將會縮小尺寸。

在這種方法中，由於大單元是不可見的，所以具有單元格的多行數據可以比較容易地進行比較。

我已經找到解決方案，實現表外的按鈕來隱藏整個行或列。帶輸入字段的按鈕可以定義一個ID並讓它隱藏該ID。我不認爲每個單元具有不同的唯一ID是很明智的，我希望更簡單一些。

捕獲單元格上的任何onclick事件的全局函數，它很好地使單元格內容可見。

我知道我多次重複我的願望，但希望這使我的願望更清晰。

編輯：

這是我最後的代碼。似乎很好地工作：

function tableclick(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    while(target != this && (!target.tagName || target.tagName != "TD")) target = target.parentNode; 
    if(target != this) 
    { 
     toggleVis(target) 
    } 
} 

function toggleVis(obj) 
{ 
    if (obj.style.fontSize != "0px") 
    { 
     obj.style.fontSize = "0px" 
    } 
    else 
    { 
     obj.style.fontSize = "16px" 
    } 
}

，然後簡單地添加onclick=tableclick(event)您的餐桌。

來源

2012-10-14 Inbar Rose

附加一個onclick事件到表中，並查看事件的目標。

table.onclick = function(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    while(target != this && (!target.tagName || target.tagName != "TD")) target = target.parentNode; 
    if(target != this) { 
     // "target" is the cell that was clicked. Do something with it. 
    } 
}

附註：您不需要JavaScript來斑馬條紋行。只需使用CSS：

tr {background-color:white} 
tr:nth-child(even) {background-color:black;}

來源

2012-10-14 22:20:09

看起來不錯，我在哪裏把這個表代碼。可能是什麼類型的目標，elementID？ –

無論何處，只要確保'table'被定義並指向表格。 'target'是一個HTMLTableDataCellElement' - 換句話說就是對錶格單元本身的引用。 –

所以如果我對它調用'getElementByID'，它應該工作？ –

-1

如果您正在學習，jQuery是要走的路。這是一個很棒的JavaScript框架，當你更熟悉javascript時，它會讓你的生活更輕鬆。 jQuery的功能可以完成你正在說的內容。請查看toggle()上的docs。

你會做這樣的事：

$('td').click(function() { 
    $('td').show(); 
    $(this).toggle(); 
});

這將「切換」你點擊任何TD的知名度。 Here是一個小提琴。

來源

2012-10-14 22:23:23 davehale23

我不想包含外部庫，因爲所有代碼都需要嵌入到文檔中。 –

jQuery不是去學*的方法。一旦你學會了*，這可能是一種方式，但如果你想對未來的進展抱有希望，你絕不應該從jQuery開始。如果jQuery突然消失會發生什麼，嗯？ –

我必須承認，通過首先嚐試並使用jQuery，我學到了JavaScript（只要我知道任何有關JavaScript）。然後*嘗試瞭解jQuery如何工作，幾乎是在意外的情況下學習了DOM API。並不是說我會推薦這種方法，但它並非沒有優點。 –

用於切換表格單元格的可見性的Javascript

回答

相關問題