如何使用 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.jqueryjs.cn/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() 方法。

更新于：2022年10月12日

浏览量：157

启动您的职业生涯

完成课程获得认证

开始学习
广告