JavaScript DOM操作表格及样式

下面是JavaScript DOM操作表格及样式的完整攻略：

1. DOM操作基本概念

DOM（文档对象模型）是一种用来处理HTML和XML文档的编程接口，它把整个文档抽象成一个文档树，树中的每个节点都是一个对象，可以用JavaScript来操作这些对象，从而对页面进行动态的改变。

通过DOM操作，可以实现很多功能，比如：改变HTML元素内容、改变CSS样式、添加、删除、修改HTML元素、动态创建HTML元素等。

2. 在HTML中创建表格

在HTML中创建表格通常用到以下标签：

<table>：表示表格
<tr>：表示表格的一行
<td>：表示表格的一个单元格
<th>：表示表格的标题单元格

在表格中，通常需要用到一些样式，比如设置表格的边框、背景色等，这些样式可以通过CSS来设置。

下面是一个简单的HTML表格示例：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

3. 通过DOM操作表格

3.1 获取表格对象

在JavaScript中，我们可以通过使用document.getElementById或document.getElementsByTagName方法来获取表格对象。

var table = document.getElementById('myTable'); // 通过id获取表格对象
var tableRows = table.getElementsByTagName('tr'); // 获取表格所有行
var tableCells = table.getElementsByTagName('td'); // 获取表格所有单元格

3.2 动态创建表格

在JavaScript中，我们可以通过创建节点的方式来动态创建表格，并将其添加到HTML文档中。

var table = document.createElement('table'); // 创建表格对象
var row1 = document.createElement('tr'); // 创建第一行对象
var col1 = document.createElement('td'); // 创建第一行第一列对象
col1.innerText = '姓名'; // 设置单元格内容
var col2 = document.createElement('td'); // 创建第一行第二列对象
col2.innerText = '年龄'; // 设置单元格内容
row1.appendChild(col1); // 将第一行第一列添加到第一行中
row1.appendChild(col2); // 将第一行第二列添加到第一行中
table.appendChild(row1); // 将第一行添加到表格中

var row2 = document.createElement('tr'); // 创建第二行对象
var col3 = document.createElement('td'); // 创建第二行第一列对象
col3.innerText = '张三'; // 设置单元格内容
var col4 = document.createElement('td'); // 创建第二行第二列对象
col4.innerText = '25'; // 设置单元格内容
row2.appendChild(col3); // 将第二行第一列添加到第二行中
row2.appendChild(col4); // 将第二行第二列添加到第二行中
table.appendChild(row2); // 将第二行添加到表格中

...

3.3 修改表格样式

在JavaScript中，我们可以通过修改表格的style属性来改变其样式。

var table = document.getElementById('myTable');
table.style.border = '1px solid black'; // 设置表格边框为黑色实线

3.4 添加事件监听器

在JavaScript中，我们可以为表格添加事件监听器，以实现相应的交互效果。

var table = document.getElementById('myTable');
table.addEventListener('click', function(event) {
  // 处理单击事件
});

4. 示例说明

4.1 示例1：动态创建表格

下面是一个动态创建表格的示例，先创建一个空表格，然后通过用户输入的行数和列数来动态生成表格。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态创建表格</title>
</head>
<body>
  <h1>动态创建表格</h1>
  <p>
    <label>行数：<input type="text" id="rowNum"></label>
    <label>列数：<input type="text" id="colNum"></label>
    <button onclick="createTable()">生成表格</button>
  </p>
  <div id="tableContainer"></div>
  <script>
    function createTable() {
      var rowNum = parseInt(document.getElementById('rowNum').value, 10);
      var colNum = parseInt(document.getElementById('colNum').value, 10);
      var table = document.createElement('table');
      table.style.border = '1px solid black';
      for (var i = 0; i < rowNum; i++) {
        var row = document.createElement('tr');
        for (var j = 0; j < colNum; j++) {
          var cell = document.createElement('td');
          cell.innerText = '行' + (i+1) + '列' + (j+1);
          row.appendChild(cell);
        }
        table.appendChild(row);
      }
      document.getElementById('tableContainer').appendChild(table);
    }
  </script>
</body>
</html>

运行该示例，输入行数和列数后，点击按钮即可生成动态表格。

4.2 示例2：修改表格样式

下面是一个修改表格样式的示例，通过用户选择的不同样式来动态改变表格样式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>修改表格样式</title>
  <style>
    table {
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>修改表格样式</h1>
  <p>
    <label>样式：
      <select id="styleSelect" onchange="changeStyle()">
        <option value="default">默认样式</option>
        <option value="borderless">无边框样式</option>
        <option value="highlight">高亮样式</option>
      </select>
    </label>
  </p>
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </table>
  <script>
    function changeStyle() {
      var style = document.getElementById('styleSelect').value;
      switch(style) {
        case 'borderless':
          document.getElementById('myTable').style.border = 'none';
          break;
        case 'highlight':
          var rows = document.getElementById('myTable').getElementsByTagName('tr');
          for (var i = 0; i < rows.length; i++) {
            rows[i].style.backgroundColor = i % 2 == 0 ? '#fff' : '#f0f0f0';
          }
          break;
        default:
          document.getElementById('myTable').style.border = '1px solid black';
          break;
      }
    }
  </script>
</body>
</html>

运行该示例，选择不同样式后，会动态改变表格样式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript DOM操作表格及样式 - Python技术站