【前端技巧】指针聚焦可编辑表格某行时获取当前行信息

原创于 2023-02-13 16:54:35 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端技巧同时被 2 个专栏收录

35 篇文章

订阅专栏

JavaScript

24 篇文章

订阅专栏

该代码段展示了一个JavaScript函数，用于在用户聚焦可编辑表格的某行时获取当前行的信息。它首先找到活动元素（activeElement），然后遍历其父节点寻找`<tr>`元素。获取到行索引后，从中提取出该行的所有列数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@Author：Outman
@Date：2023-02-13

指针聚焦可编辑表格某行时获取当前行信息

const mainFunc = () => {
  const activeEl = document.activeElement;
  const activeTrEl = this.getParentNode(activeEl, "tr");
  if (activeTrEl) {
    window.event.preventDefault();
    const rowIndex = activeTrEl.rowIndex;
    // 获取表格中指定行的所有信息
    const activeColData = this.table[rowIndex];
    console.log(activeColData);
  }
};

/**
 * 遍历获取子元素的指定nodeName父元素
 * @desc activeEl为指定的子元素，nodeName为需要查找的父级元素的tag标签
 * @param {Element} activeEl
 * @param {String} nodeName
 */
const getParentNode = (activeEl, nodeName) => {
  if (activeEl) {
    if (activeEl.nodeName === nodeName.toUpperCase()) {
      return activeEl;
    } else {
      return this.getParentNode(activeEl.parentNode, nodeName);
    }
  } else {
    return null;
  }
};