資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 判斷空單元格的邊框和背景是否隱藏？
在本教程中，我們將學習如何使用 JavaScript 判斷空單元格的邊框和背景是否隱藏。
JavaScript 程式語言可以用來建立和修改 DOM 元素。將 HTML 元素（如表格）新增到 HTML 文件中，有兩種方法。第一種方法是直接將 HTML 表格標籤新增到我們的 HTML 網頁中，第二種方法是將整個表格編寫為 JavaScript 程式碼。第二種方法是建立和在 DOM 中包含表格最常用的方法。
縮寫 tr 表示表格行。它代表完整的表格行。我們必須先建立一個行，然後使用 <td> 標籤將該行中的資料插入到表格中，無論是表格的頭部、主體還是腳註。縮寫 <td> 代表表格資料。它代表表格的單個單元格。
以下是使用 JavaScript 判斷空單元格的邊框和背景是否隱藏的方法。
emptyCells 屬性方法
empty-cells 屬性指定表格中空單元格是否應該具有邊框和背景（僅適用於“分隔邊框”模型）。
JavaScript 中的 emptyCells 屬性選擇空表格單元格，以指定它們是否應該具有邊框和背景。換句話說，它指示瀏覽器是否在表格單元格為空時繪製邊框或填充背景。這類似於設定空表格單元格的 visibility 屬性。
空單元格的一個很好的用例是，當您不確定表格是否包含空資料點並決定隱藏它們時。表格曾經是非正式構建網頁佈局的方式，因此它是顯示和隱藏元素的有用工具。當表格用於外觀或元素具有 display 屬性時。
語法
document.getElementById("mytableID").style.emptyCells = "hide";
使用 getElementById() 方法獲取表格 ID，並將空單元格設定為隱藏屬性。
示例
在這個例子中，我們建立了一個邊框為 2px、顏色為實黑的表格。表格的標題是序號和豪華轎車。表格內容的寬度為 100%。豪華轎車包括沃爾沃 XC90、勞斯萊斯幻影、寶馬 X6 和奧迪 RS7。第 4 個序號的單元格為空。第 5 個序號的單元格也為空。使用 emptyCells 屬性，我們可以看到單元格的背景和邊框是隱藏的。
<html> <head> <style> table, td { border: 2px solid black; } #mytableID { width: 100%; } </style> </head> <body> <h2> Check whether the border and background of empty cells are hidden or not using <i> emptyCells property </i> </h2> <table id = "mytableID" style = "empty-cells:hide"> <tr> <td><b>Serial. No.</b></td> <td><b>Luxury Cars</b></td> </tr> <tr> <td>1.</td> <td>Volvo XC90</td> </tr> <tr> <td>2.</td> <td>Rolls Royce Phantom</td> </tr> <tr> <td>3.</td> <td>BMW X6</td> </tr> <tr> <td>4.</td> <td></td> </tr> <tr> <td></td> <td>Audi RS7</td> </tr> </table> </body> <br> <button type = "button" onclick = "myFunction()"> Check </button> <button type = "button" onclick = "show()"> show hidden cells </button> <p id = "root">Result Here</p> <script> function myFunction() { if (document.getElementById("mytableID").style.emptyCells == "hide"){ document.getElementById("root").innerHTML = "Hidden"; }else{ document.getElementById("root").innerHTML = "No cell Hidden"; } } function show() { document.getElementById("mytableID").style.emptyCells = "show"; } </script> </html>
jQuery 隱藏單元格方法
外部庫 jQuery 是一個快速、緊湊且功能豐富的 JavaScript 庫。它透過提供一個易於使用的、可在許多瀏覽器上執行的 API，簡化了 HTML 文件的導航和操作、事件處理、動畫和 Ajax。由於其靈活性和可擴充套件性，jQuery 改變了數百萬人編寫 JavaScript 的方式。
要隱藏選定的元素，請使用 jQuery hide() 方法。這對應於 CSS 屬性 display: none。隱藏的元素根本不會顯示（不再影響頁面的佈局）。使用 show() 方法顯示隱藏的元素。
語法
$(this).hide();
使用 $(this) 函式選擇空的表格單元格，並將其設定為隱藏屬性。
示例
在這個例子中，我們建立了一個邊框為 2px、顏色為實黑的表格。表格的標題是序號和跑車。表格內容佔據頁面的整個寬度。雅馬哈 R15S、TVS Apache RR 310、Bajaj Pulsar NS200 和 KTM RC 390 都是跑車。第四輛跑車的單元格為空。第二個序號的單元格也為空。我們可以看到，透過使用 jQuery 的 .hide() 屬性，單元格的背景和邊框被隱藏了。單元格向左移動以節省空間。
<html> <head> <style> table, td { border: 2px solid black; } #mytableID { width: 100%; } table { empty-cells: hide; } </style> </head> <body> <p> Check whether the border and background of empty cells are hidden or not using <i> JQuery hide </i> property </p> <table id = "mytableID" style = "empty-cells:hide;"> <tr> <td><b>Serial. No.</b></td> <td><b>Sports Bikes</b></td> </tr> <tr> <td>1.</td> <td>Yamaha R15S</td> </tr> <tr> <td></td> <td>TVS Apache RR 310</td> </tr> <tr> <td>3.</td> <td>Bajaj Pulsar NS200</td> </tr> <tr> <td>4.</td> <td></td> </tr> <tr> <td>5.</td> <td>KTM RC 390</td> </tr> </table> </body> <br> <button type = "button" onclick = "myFunction()"> Check </button> <p id = "root"></p> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <script> function myFunction() { var td1 = $('td').each(function(){ if ($(this).html() == '') { //$(this).hide(); document.getElementById('root').innerHTML = "Border and background of Empty Cells are hidden" } }); } </script> </html>
在本教程中，我們討論了兩種方法來判斷空單元格的邊框和背景是否隱藏。第一種方法是使用 Style emptyCells 屬性，第二種方法是使用 jQuery hide() 方法。
瀏覽量：157
