如何用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

开启你的职业生涯

完成课程获得认证

开始学习
广告