正文

手机端如何轻松实现HTML5表格的添加与删除行操作？

/0 浏览量
0705

在移动端开发中，表格的添加与删除行操作是常见的需求。HTML5 提供了丰富的标签和属性来构建表格，而 JavaScript 则可以让我们轻松地实现动态添加和删除行的功能。以下是如何在手机端实现这一功能的详细步骤。

1. 创建基本的HTML表格

首先，我们需要创建一个基本的 HTML 表格。这可以通过 <table>、<tr>、<th> 和 <td> 标签来完成。

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>操作</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td><button onclick="deleteRow(this)">删除</button></td>
  </tr>
</table>
<button onclick="addRow()">添加一行</button>

在这个例子中，我们创建了一个包含姓名、年龄和操作列的表格。每行都有一个删除按钮，用于删除该行。

2. 添加行

为了添加行，我们需要编写一个 JavaScript 函数 addRow()。这个函数将创建一个新的行元素，并将其添加到表格的末尾。

function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1); // 在表格末尾添加新行
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.innerHTML = "<input type='text' value='新名字'/>";
  cell2.innerHTML = "<input type='number' value='新年龄'/>";
  cell3.innerHTML = "<button onclick='deleteRow(this)'>删除</button>";
}

在这个函数中，我们使用 document.getElementById() 获取表格元素，然后使用 insertRow(-1) 在表格末尾添加一行。接着，我们使用 insertCell() 在新行中添加三个单元格，并设置单元格内容。

3. 删除行

删除行的功能可以通过一个名为 deleteRow() 的 JavaScript 函数来实现。这个函数将删除包含指定按钮的行。

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

在这个函数中，我们首先获取包含按钮的行元素，然后使用 parentNode 获取其父元素（即行所在的行元素），最后使用 removeChild() 删除该行。

4. 响应式设计

为了确保表格在手机端也能良好显示，我们可以使用 CSS 媒体查询来实现响应式设计。

@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  th, td {
    display: block;
    width: 100%;
  }
  th, td input {
    width: 100%;
  }
}

在这个例子中，当屏幕宽度小于 600 像素时，表格宽度设置为 100%，单元格宽度设置为 100%，并且输入框宽度也设置为 100%，从而实现响应式设计。

总结

通过以上步骤，我们可以在手机端轻松实现 HTML5 表格的添加和删除行操作。在实际开发中，可以根据具体需求调整表格结构和样式，以达到最佳的用户体验。

-- 展开阅读全文 --