如何使用 JavaScript 布局表格单元格、行和列?

javascriptobject oriented programmingfront end technology更新于 2024/5/22 11:24:17

在本教程中，我们将学习如何使用 JavaScript 布局表格单元格、行和列。

我们可以使用 JavaScript 构建和编辑 DOM(文档对象模型)元素。有两种方法可以将 HTML 组件(例如表格)添加到 HTML 文档中。第一种方法是将 HTML 表格标签直接包含到我们的 HTML 网页中，第二种方法是在我们的 JavaScript 代码中创建完整的表格。第二种方法是构建表格并将其添加到 DOM 的最常用方法。

tr 缩写指的是表格行。这反映了完整的表格行。要将数据放入表格的标题、正文或页脚中，我们必须首先构建一行，然后使用 td 标签将数据插入该行。表格数据的缩写是 td。它代表表格的单个单元格。

以下是使用 JavaScript 布局表格单元格、行和列的方法。

使用 Style tableLayout 属性

表格和列组件的宽度以及第一行单元格的宽度决定了表格和列的宽度。列宽不受后续行单元格的影响。

所有行在收到后都会立即显示；固定布局比自动布局更快。水平排列仅由表格和列的宽度决定，与单元格内容的宽度无关。

语法

document.getElementById("myID").style.tableLayout = "fixed";
document.getElementById("myID").style.tableLayout = "auto";

使用 getElementById() 方法获取表的 ID。表单元格、行和列布局设置为"fixed"或"auto"。

示例 1

将 Style tableLayout 属性设置为"fixed"

在示例中，我们创建了一个边框为 3 px 且纯黑色的表。创建了一个以序列号和语言为标题的表。表内容的宽度为 180px。语言为 HTML、CSS、JavaScript、Python 和 Java。表单元格、行和列默认设置为自动。我们将此表的布局更改为fixed，它由表和列的宽度决定，并忽略内容的宽度。


<html>
<head>
<style>
   table, td {
      border: 3px solid black;
   }
   #mytableID {
      width: 100%;
   }
</style>
</head>
<body>
   <h3>Setting the Style tableLayout property to "fixed"</h3>
   <p id = "myFunction()"></p>
   <table id = "mytableID">
      <tr>
         <td> <b>Serial. No.</b> </td>
         <td> <b>Languages</b> </td>
      </tr>
      <tr>
         <td> 1. </td>
         <td> HTML </td>
      </tr>
      <tr>
         <td> 2. </td>
         <td> CSS </td>
      </tr>
      <tr>
         <td> 3. </td>
         <td> JavaScript </td>
      </tr>
      <tr>
         <td> 4. </td>
         <td> Python </td>
      </tr>
      <tr>
         <td> 5. </td>
         <td> Java </td>
      </tr>
   </table>
</body>
<script>
   function myFunction() {
      document.getElementById("mytableID").style.tableLayout = "fixed";
   }
</script>
</html>

示例 2

将 Style tableLayout 属性设置为"auto"。

在此示例中，我们制作了一个带有 3 px 边框和纯黑色边框颜色的表格。表格由标题 Serial No. 和 JavaScript Frameworks 组成。表格内容的宽度设置为 100%。框架包括 NodeJS、VueJS、React、Angular 和 EmberJS。表格单元格、行和列默认为 auto。此值由最宽的不可分割内容的列宽定义。


<html>
<head>
<style>
   table, td {
      border: 3px solid black;
   }
   #mytableID {
      width: 100%;
   }
</style>
</head>
<body>
   <h3> Setting the Style tableLayout property to "auto". </h3>
   <p id = "myFunction()"></p>
   <table id = "mytableID">
      <tr>
         <td> <b>Serial. No.</b> </td>
         <td> <b>JavaScript Frameworks</b> </td>
      </tr>
      <tr>
         <td> 1. </td>
         <td> NodeJS </td>
      </tr>
      <tr>
         <td> 2. </td>
         <td> VueJS </td>
      </tr>
      <tr>
         <td> 3. </td>
         <td> React </td>
      </tr>
      <tr>
         <td> 4. </td>
         <td> Angular </td>
      </tr>
      <tr>
         <td> 5. </td>
         <td> EmberJS </td>
      </tr>
   </table>
</body>
<script>
   function myFunction() {
      document.getElementById("mytableID").style.tableLayout =
      "auto";
   }
</script>
</html>

示例 3

在下面的例子中，我们演示了如何使用 Style tableLayout 属性的"fixed"和"auto"值。


<html>
<head>
<style>
   table, td {
      border: 3px solid black;
   }
   #mytableID {
      width: 100%;
   }
   #mytableID1 {
      width: 100%;
   }
</style>
</head>
<body>
   <h2> Layout table cells, rows, and columns using <i>table layout
   auto</i> method </h2>
   <h3 >Table layout: Fixed</h3>
   <table id = "mytableID">
      <tr>
      <td> <b>Serial. No.</b> </td>
      <td> <b>JavaScript Frameworks</b> </td>
      </tr>
      <tr>
      <td> 1. </td>
      <td> NodeJS </td>
      </tr>
      <tr>
      <td> 2. </td>
      <td> VueJS </td>
      </tr>
      <tr>
      <td> 3. </td>
      <td> React </td>
      </tr>
      <tr>
      <td> 4. </td>
      <td> Angular </td>
      </tr>
      <tr>
      <td> 5. </td>
      <td> EmberJS </td>
      </tr>
   </table>
   <h3 >Table layout: Fixed</h3>
   <table id = "mytableID1">
      <tr>
         <td> <b>Serial. No.</b> </td>
         <td> <b>Languages</b> </td>
      </tr>
      <tr>
         <td> 1. </td>
         <td> HTML </td>
      </tr>
      <tr>
         <td> 2. </td>
         <td> CSS </td>
      </tr>
      <tr>
         <td> 3. </td>
         <td> JavaScript </td>
      </tr>
      <tr>
         <td> 4. </td>
         <td> Python </td>
      </tr>
      <tr>
         <td> 5. </td>
         <td> Java </td>
      </tr>
   </table>
</body>
<script>
   document.getElementById("mytableID").style.tableLayout = "auto";
   document.getElementById("mytableID1").style.tableLayout = "fixed";
</script>
</html>