資料結構
網路
關係資料庫管理系統(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
