javascript实现table单元格点击展开隐藏效果(实例代码)

下面是javascript实现table单元格点击展开隐藏效果的完整攻略。

1. 需求分析

我们需要实现一个table表格，其中有些单元格可以点击，点击后会展开隐藏内容，再次点击则会隐藏内容。

2. 实现思路

我们可以通过以下步骤来实现上述需求：

给需要实现点击展开功能的单元格添加一个点击事件监听器。
监听器中判断当前单元格是否处于展开状态。
如果处于展开状态，将展开的内容隐藏；否则将内容展开。
在展开或隐藏内容时，对应单元格的样式也要进行修改，以提示用户当前状态。

3. 实现步骤

接下来，我们将逐步实现上述思路。首先，在html中编写好table表格，并添加对应的类或id，用于javascript代码中的定位和操作：

<table>
  <tr>
    <td class="clickable">这是一个可点击的单元格</td>
    <td>这是一个普通的单元格</td>
    <td>这是一个普通的单元格</td>
  </tr>
  <tr>
    <td class="clickable">这是一个可点击的单元格</td>
    <td>这是一个普通的单元格</td>
    <td>这是一个普通的单元格</td>
  </tr>
</table>

然后，在javascript中获取到需要实现点击展开功能的单元格，并添加点击事件监听器：

var cells = document.getElementsByClassName("clickable");
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    // 展开或隐藏内容的功能代码将在下文的示例中详细说明
  });
}

接下来，我们需要编写功能代码来实现点击展开功能。其中需要注意以下几点：

1.点击展开的内容需要在单元格下方显示，展开时需要构建一个新的html元素，并将其插入单元格下方；隐藏时需要将元素从dom树中移除。

单元格展开时需要将其扩展至整行，以便展开的内容能够占据整行。

var cells = document.getElementsByClassName("clickable");
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    var row = this.parentNode; // 获取所属行
    var nextRow = row.nextElementSibling; // 获取下一行，用于判断是否处于展开状态
    var content = row.getElementsByClassName("content")[0]; // 获取展开的内容

    if (nextRow && nextRow.classList.contains("expand")) {
      // 如果处于展开状态，将展开的内容隐藏，并移除展开时生成的html元素
      nextRow.parentNode.removeChild(nextRow);
      nextRow.classList.remove("expand");
      this.classList.remove("open");
    } else {
      // 否则，构建一个新的html元素，在单元格下方插入展开的内容，并将内容设置为整行宽度
      var expand = document.createElement("tr");
      var td = document.createElement("td");
      td.colSpan = row.childNodes.length;
      td.appendChild(content);
      expand.classList.add("expand");
      expand.appendChild(td);
      row.parentNode.insertBefore(expand, nextRow);
      this.classList.add("open");
    }
  });
}

最后，我们需要在css文件中编写样式，以实现提示用户单元格的展开或隐藏状态。具体样式实现方法在下文示例中介绍。

4. 示例说明

下面，我们将通过两个示例来详细说明如何实现javascript点击展开功能。

示例1：基础实现，仅展开文字

首先，在html中编写好table表格，并为需要实现点击展开功能的单元格添加类名"clickable"：

<table>
  <tr>
    <td class="clickable">这是一个可点击的单元格</td>
    <td>这是一个普通的单元格</td>
    <td>这是一个普通的单元格</td>
  </tr>
  <tr>
    <td class="clickable">这是一个可点击的单元格</td>
    <td>这是一个普通的单元格</td>
    <td>这是一个普通的单元格</td>
  </tr>
</table>

然后在javascript中获取到需要实现点击展开功能的单元格，并添加点击事件监听器：

var cells = document.getElementsByClassName("clickable");
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    var row = this.parentNode; // 获取所属行
    var nextRow = row.nextElementSibling; // 获取下一行，用于判断是否处于展开状态
    var content = row.getElementsByTagName("td")[0].textContent; // 获取展开的内容

    if (nextRow && nextRow.classList.contains("expand")) {
      // 如果处于展开状态，将展开的内容隐藏，并移除展开时生成的html元素
      nextRow.parentNode.removeChild(nextRow);
      nextRow.classList.remove("expand");
      this.classList.remove("open");
    } else {
      // 否则，构建一个新的html元素，在单元格下方插入展开的内容，并将内容设置为整行宽度
      var expand = document.createElement("tr");
      var td = document.createElement("td");
      td.colSpan = row.childNodes.length;
      td.appendChild(document.createTextNode(content));
      expand.classList.add("expand");
      expand.appendChild(td);
      row.parentNode.insertBefore(expand, nextRow);
      this.classList.add("open");
    }
  });
}

最后，在css文件中添加如下样式即可：

.clickable {
  cursor: pointer;
}

.clickable.open {
  background-color: #eee;
}

.expand td {
  padding: 0;
  border: none;
}

.expand td > * {
  display: block;
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #ddd;
}

其中，".clickable.open"用于在单元格展开时为其添加背景色；".expand td > *"用于将展开的内容撑满整行，并设置适当的样式，包括padding、margin、border等。

示例2：展开完整网页

在上面的示例中，我们仅展开了简单的文本内容。如果我们想要将整个网页作为内容展开，该怎么做呢？这就需要用到ajax技术了。

首先，在html中写好table表格，并添加类名"clickable"：

<table>
  <tr>
    <td class="clickable">展开百度首页</td>
    <td>这是一个普通的单元格</td>
    <td>这是一个普通的单元格</td>
  </tr>
  <tr>
    <td class="clickable">展开Google首页</td>
    <td>这是一个普通的单元格</td>
    <td>这是一个普通的单元格</td>
  </tr>
</table>

然后在javascript中获取到需要实现点击展开功能的单元格，并添加点击事件监听器。根据ajax获取到响应后，在回调函数中展开内容：

var cells = document.getElementsByClassName("clickable");
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    var row = this.parentNode; // 获取所属行
    var nextRow = row.nextElementSibling; // 获取下一行，用于判断是否处于展开状态
    var url;

    // 根据单元格文本设置展开的url
    if (this.textContent === "展开百度首页") {
      url = "https://www.baidu.com";
    } else if (this.textContent === "展开Google首页") {
      url = "https://www.google.com";
    }

    if (nextRow && nextRow.classList.contains("expand")) {
      // 如果处于展开状态，将展开的内容隐藏，并移除展开时生成的html元素
      nextRow.parentNode.removeChild(nextRow);
      nextRow.classList.remove("expand");
      this.classList.remove("open");
    } else {
      // 否则，构建一个新的html元素，在单元格下方插入展开的内容，并将内容设置为整行宽度
      var expand = document.createElement("tr");
      var td = document.createElement("td");
      td.colSpan = row.childNodes.length;
      expand.classList.add("expand");
      expand.appendChild(td);
      row.parentNode.insertBefore(expand, nextRow);
      this.classList.add("open");

      // 发送ajax请求，获取响应
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 在回调函数中展开内容
          td.innerHTML = xhr.response;
        }
      };
      xhr.send();
    }
  });
}

最后，在css文件中添加如下样式即可：

.clickable {
  cursor: pointer;
}

.clickable.open {
  background-color: #eee;
}

.expand td {
  padding: 0;
  border: none;
}

.expand td > * {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
}

其中，".expand td > *"用于撑满整行宽度，并去除网页自带的padding、margin、border等样式。

以上就是javascript实现table单元格点击展开隐藏效果的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现table单元格点击展开隐藏效果(实例代码) - Python技术站