event.srcElement+表格应用

2023年6月10日下午3:28 • JavaScript

Sure!

什么是 event.srcElement?

event.srcElement是一种废弃的DOM属性，用于获取触发事件的元素。目前更推荐使用 event.target属性来代替它。event.target返回事件发生时的元素，而event.srcElement在特定情况下返回与event.target相同的值。但是有一些情况下event.srcElement会不兼容。因此建议使用event.target。

如何实现“event.srcElement+表格应用”？

在表格应用中，我们可以利用event.target获取在表格中点击的元素，并通过它找到所在的行和列，进而实现表格的操作。

下面是示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表格点击事件实例</title>
  <style>
    table {
      border-collapse: collapse;
    }

    td, th {
      border: 1px solid black;
      padding: 5px;
    }

    .selected {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>Tom</td>
      <td>男</td>
      <td>20</td>
      <td><button>删除</button></td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>女</td>
      <td>22</td>
      <td><button>删除</button></td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>男</td>
      <td>19</td>
      <td><button>删除</button></td>
    </tr>
  </table>
  <script>
    const table = document.querySelector('table');
    table.addEventListener('click', handleTableClick);

    function handleTableClick(event) {
      const target = event.target;
      if (target.tagName === 'TD') {
        // 获取 td 所在的行和列
        const row = target.parentElement;
        const col = target.cellIndex;
        console.log(`行：${row.rowIndex}, 列：${col}`);
      } else if (target.tagName === 'BUTTON') {
        // 如果点击了删除按钮，则删除所在行
        const row = target.parentElement.parentElement;
        row.remove();
      }
    }
  </script>
</body>
</html>

以上代码展示了如何实现在表格中的点击事件中获取所在的行和列，以及如何用删除按钮删除所在的行。

再看一个例子，如何在表格中点击单元格后实现选中效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表格点击事件实例</title>
  <style>
    table {
      border-collapse: collapse;
    }

    td, th {
      border: 1px solid black;
      padding: 5px;
    }

    .selected {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>Tom</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>女</td>
      <td>22</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>男</td>
      <td>19</td>
    </tr>
  </table>
  <script>
    const table = document.querySelector('table');
    table.addEventListener('click', handleTableClick);

    function handleTableClick(event) {
      const target = event.target;
      if (target.tagName === 'TD') {
        target.classList.toggle('selected');
      }
    }
  </script>
</body>
</html>

以上代码展示了如何在表格中点击单元格后，为其添加选中效果。

希望以上内容能够对你有所帮助，如果还有任何疑问欢迎继续问我哦。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：event.srcElement+表格应用 - Python技术站