JS创建自定义表格具体实现

JS创建自定义表格是一项常用的前端开发技能，下面是实现该技能的攻略：

步骤一：创建一个页面元素来展示表格

我们可以使用HTML中的table标签来创建一个页面元素来展示表格，代码如下：

<table id="myTable">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格内容1</td>
      <td>表格内容2</td>
      <td>表格内容3</td>
    </tr>
    <tr>
      <td>表格内容4</td>
      <td>表格内容5</td>
      <td>表格内容6</td>
    </tr>
  </tbody>
</table>

步骤二：使用JavaScript动态增加表格内容

我们可以使用JavaScript动态增加表格内容，代码如下：

// 获取表格元素
var myTable = document.getElementById("myTable");

// 创建一个新的表格行
var newRow = myTable.insertRow();

// 创建三列单元格
var newCell1 = newRow.insertCell();
var newCell2 = newRow.insertCell();
var newCell3 = newRow.insertCell();

// 设置单元格内文本内容
newCell1.innerHTML = "新表格内容1";
newCell2.innerHTML = "新表格内容2";
newCell3.innerHTML = "新表格内容3";

示例一：动态增加表格内容

下面的代码实现了在点击按钮后动态增加表格内容的功能：

<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>表格内容1</td>
        <td>表格内容2</td>
        <td>表格内容3</td>
      </tr>
      <tr>
        <td>表格内容4</td>
        <td>表格内容5</td>
        <td>表格内容6</td>
      </tr>
    </tbody>
  </table>
  <button onclick="addRow()">添加一行</button>
  <script>
    function addRow() {
      var myTable = document.getElementById("myTable");
      var newRow = myTable.insertRow();
      var newCell1 = newRow.insertCell();
      var newCell2 = newRow.insertCell();
      var newCell3 = newRow.insertCell();
      newCell1.innerHTML = "新表格内容1";
      newCell2.innerHTML = "新表格内容2";
      newCell3.innerHTML = "新表格内容3";
    }
  </script>
</body>

示例二：根据输入框内容查找表格行

下面的代码实现了在输入框输入关键字后查找表格并高亮显示匹配行的功能：

<body>
  <input type="text" id="searchInput" placeholder="请输入关键字">
  <table id="myTable">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>表格内容1</td>
        <td>表格内容2</td>
        <td>表格内容3</td>
      </tr>
      <tr>
        <td>表格内容4</td>
        <td>表格内容5</td>
        <td>表格内容6</td>
      </tr>
    </tbody>
  </table>
  <script>
    function searchTable() {
      // 获取输入框内容
      var input = document.getElementById("searchInput").value.toUpperCase();
      // 获取表格元素
      var table = document.getElementById("myTable");
      // 获取表格中的所有行
      var rows = table.getElementsByTagName("tr");
      // 遍历所有行，并找到匹配的行
      for (var i = 0; i < rows.length; i++) {
        var cells = rows[i].getElementsByTagName("td");
        var match = false;
        for (var j = 0; j < cells.length; j++) {
          if (cells[j].innerHTML.toUpperCase().indexOf(input) > -1) {
            match = true;
            break;
          }
        }
        if (match) {
          // 如果找到了匹配的行，则将其高亮显示
          rows[i].style.backgroundColor = "yellow";
        } else {
          // 如果没有找到匹配的行，则将其恢复原色
          rows[i].style.backgroundColor = "";
        }
      }
    }
    document.getElementById("searchInput").addEventListener("keyup", searchTable);
  </script>
</body>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS创建自定义表格具体实现 - Python技术站

JS创建自定义表格具体实现

步骤一：创建一个页面元素来展示表格

步骤二：使用JavaScript动态增加表格内容

示例一：动态增加表格内容

示例二：根据输入框内容查找表格行

相关文章