html/javascript-表格的创建和使用

快来打我* 2023-10-14 08:53 0阅读 0赞

#### html中表格的创建和使用 ####

*   *  一 摘要
     *  二 使用html table标签创建表格（在html文件中）
     *  三 使用javascript创建表格（在js文件中）
     *  四 表格属性的设置：
     *  4.1. 右边框的设置：
     *  4.2. 只给表格单元格加右边框
     *  4.3. 动态设置右边框的风格

### 一 摘要 ###

html经常使用到表格table。在HTML中创建和使用表格，可以直接在html定义标签，也可以使用DOM（文档对象模型）来动态创建和操作表格元素。

### 二 使用html table标签创建表格（在html文件中） ###

<table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </table>

### 三 使用javascript创建表格（在js文件中） ###

下面是一个示例，展示了如何使用JavaScript创建一个简单的表格并向其添加数据：

function createTable() {
        
      // 创建一个table元素
      var table = document.createElement("table");
    
      // 创建表头行
      var headerRow = document.createElement("tr");
    
      // 创建表头单元格
      var headerCell1 = document.createElement("th");
      headerCell1.innerHTML = "Header 1";
      headerRow.appendChild(headerCell1);
    
      var headerCell2 = document.createElement("th");
      headerCell2.innerHTML = "Header 2";
      headerRow.appendChild(headerCell2);
    
      var headerCell3 = document.createElement("th");
      headerCell3.innerHTML = "Header 3";
      headerRow.appendChild(headerCell3);
    
      // 将表头行添加到表格中
      table.appendChild(headerRow);
    
      // 创建数据行1
      var dataRow1 = document.createElement("tr");
    
      // 创建数据单元格1
      var dataCell1_1 = document.createElement("td");
      dataCell1_1.innerHTML = "Data A";
      dataRow1.appendChild(dataCell1_1);
    
       // 创建数据单元格2
       var dataCell1_2 = document.createElement("td");
       dataCell1_2.innerHTML = "Data B";
       dataRow1.appendChild(dataCell1_2);
    
       // 创建数据单元格3
       var dataCell1_3 = document.createElement("td");
       dataCell1_3.innerHTML = "Data C";
       dataRow1.appendChild(dataCell1_3);
    
       // 将数据行1添加到表格中
       table.appendChild(dataRow1);
    
       // 创建数据行2
       var dataRow2 = document.createElement("tr");
    
       // 创建数据单元格4
       var dataCell2_1 = document.createElement("td");
       dataCell2_1.innerHTML = "Data X";
       dataRow2.appendChild(dataCell2_1);
    
        // 创建数据单元格5
        var dataCell2_2 = document.createElement("td");
        dataCell2_2.innerHTML = "Data Y";
        dataRow2.appendChild(dataCell2_2);
    
        // 创建数据单元格6
        var dataCell2_3 = document.createElement("td");
        dataCell2_3.innerHTML = "Data Z";
        dataRow2.appendChild(dataCell2_3);
    
        // 将数据行2添加到表格中
        table.appendChild(dataRow2);
    
      // 将表格添加到页面中的body部分
      document.body.appendChild(table);
    }

### 四 表格属性的设置： ###

### 4.1. 右边框的设置： ###

可以使用CSS样式来给table单元格加边框，具体方法如下：

1.  在CSS样式中设置table的边框样式和宽度：

table {
        
      border-collapse: collapse; /* 合并边框 */
      border: 1px solid #ccc; /* 边框样式和颜色 */
    }

1.  在CSS样式中设置td单元格的边框样式和宽度：

td {
        
      border: 1px solid #ccc; /* 边框样式和颜色 */
    }

完整的示例代码如下：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Table Border</title>
      <style>
        table {
          
          border-collapse: collapse;
          border: 1px solid #ccc;
        }
        td {
          
          border: 1px solid #ccc;
        }
      </style>
    </head>
    <body>
      <table>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格4</td>
          <td>单元格5</td>
          <td>单元格6</td>
        </tr>
      </table>
    </body>
    </html>

### 4.2. 只给表格单元格加右边框 ###

可以使用CSS来给表格单元格加边框。如果只想给表格单元格加右边框，可以使用以下CSS代码：

td {
        
      border-right: 1px solid black;
    }

这会给所有表格单元格添加一个1像素宽的黑色实线右边框。如果只想给特定的表格单元格添加右边框，可以使用类或ID选择器来选择特定的单元格，例如：

td.right-border {
        
      border-right: 1px solid black;
    }

这会给所有带有“right-border”类的表格单元格添加一个1像素宽的黑色实线右边框。在HTML中，可以将该类添加到要添加右边框的单元格中：

<td class="right-border">单元格内容</td>

### 4.3. 动态设置右边框的风格 ###

要动态设置右边框的风格，可以使用JavaScript来实现。具体步骤如下：

1.  获取需要设置右边框的元素。
2.  使用JavaScript的style属性来设置元素的border-right属性。
3.  根据需要设置不同的右边框风格，可以使用以下属性：
    
     *  border-right-style：设置右边框的样式，如solid、dashed、dotted等。
     *  border-right-width：设置右边框的宽度，可以使用像素值或者百分比。
     *  border-right-color：设置右边框的颜色，可以使用颜色名称、RGB值或者十六进制值。
4.  在需要改变右边框风格的时候，调用JavaScript代码来修改元素的border-right属性即可。

以下是一个示例代码，可以动态设置一个元素的右边框为红色实线：

// 获取需要设置右边框的元素
    var element = document.getElementById("myElement");
    
    // 设置右边框的样式、宽度和颜色
    element.style.borderRightStyle = "solid";
    element.style.borderRightWidth = "1px";
    element.style.borderRightColor = "red";

需要注意的是，如果需要设置多个元素的右边框风格，可以使用循环来遍历每个元素并设置其border-right属性。