JS获取单击按钮单元格所在行的信息

获取单元格所在行的信息一般需要以下步骤:

  1. 对表格中的按钮进行事件绑定
  2. 在事件绑定的回调函数中获取按钮所在的单元格元素td
  3. 获取单元格所在的行元素tr
  4. 根据需要获取行元素tr中的其他信息

以下是两条示例:

示例一

HTML代码:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

JS代码:

const deleteBtns = document.querySelectorAll('.delete-btn');

deleteBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取按钮所在的单元格元素td
    const td = btn.parentElement;

    // 获取单元格所在的行元素tr
    const tr = td.parentElement;

    // 获取行元素tr中的第一个单元格的内容(即ID)
    const id = tr.cells[0].textContent;

    // 根据需要进行其他操作
    console.log(`删除ID为${id}的记录`);
  });
});

示例二

HTML代码:

<table>
  <thead>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1">
      <td>商品A</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr data-id="2">
      <td>商品B</td>
      <td>200</td>
      <td>3</td>
      <td>600</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

JS代码:

const deleteBtns = document.querySelectorAll('.delete-btn');

deleteBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取按钮所在的单元格元素td
    const td = btn.parentElement;

    // 获取单元格所在的行元素tr
    const tr = td.parentElement;

    // 获取行元素tr上保存的商品ID
    const id = tr.dataset.id;

    // 获取行元素tr中的第一个单元格的内容(即商品名称)
    const name = tr.cells[0].textContent;

    // 根据需要进行其他操作
    console.log(`删除商品${name}(ID为${id})`);
  });
});

以上两个示例分别演示了如何获取表格中的ID和商品名称信息。需要注意的是,上述示例假设表格中的按钮全部为删除按钮,如果不是删除按钮,则需要根据实际情况修改代码实现。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS获取单击按钮单元格所在行的信息 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • Javascript 定时器调用传递参数的方法

    JavaScript 定时器调用传递参数的方法可以使用 setInterval 或 setTimeout 方法,并通过匿名函数或箭头函数传递参数。 使用 setInterval 方法来调用定时器并传递参数: setInterval(function(parameter1, parameter2){ // 执行相关操作 }, delay, parameter1…

    JavaScript 2023年6月11日
    00
  • js关闭浏览器窗口及检查浏览器关闭事件

    要实现JavaScript关闭浏览器窗口以及检查浏览器关闭事件,可以使用window.close()方法和window.onbeforeunload事件。 使用window.close()方法关闭浏览器窗口 使用window.close()方法可以轻易地关闭当前窗口或打开的窗口。但要注意,在现代浏览器中,该方法只能关闭由JavaScript打开的窗口,不能关…

    JavaScript 2023年6月11日
    00
  • JavaScript实现抽奖器效果

    抽奖器效果是很常见的一种交互效果,下面就用 Markdown 格式给大家详细讲解一下如何使用 JavaScript 实现抽奖器效果。 准备工作 在实现抽奖器效果之前,我们需要先准备好以下工作: 在 HTML 页面中放置一个用于显示抽奖结果的元素,比如一个 span 标签。 准备好抽奖数据,可以是一个数组,每个元素表示一个奖品。 实现步骤 接下来就可以开始实现…

    JavaScript 2023年6月11日
    00
  • Vue中使用import进行路由懒加载的原理分析

    Vue是一款非常流行的前端框架,Vue-router是Vue框架提供的一个非常重要的路由管理插件。在Vue中使用import进行路由懒加载是Vue-router提供的一种路由懒加载方式,其原理分析如下: 1. import引入组件 在Vue项目中,我们通常使用import语法引入各种组件。 示例: import Vue from ‘vue’ import A…

    JavaScript 2023年6月11日
    00
  • JavaScript利用闭包实现模块化

    当我们编写 JavaScript 应用时,尽可能使代码模块化是一个好习惯。这意味着把代码划分为小的、独立的、可重用的部分,使得代码更加结构化、可维护和可读性更好。使用闭包实现模块化是一种通用的模式,本文将为你介绍如何使用JavaScript中的闭包实现模块化。 什么是闭包 在深入模块化之前,要先了解闭包。JavaScript中的闭包是指当一个函数引用了该函数…

    JavaScript 2023年6月10日
    00
  • two.js之实现动画效果示例

    Two.js 介绍 Two.js 是一个用于在网页上创建 2D 动画的轻量级绘图库。它基于 SVG 封装了 Canvas API,可在 Canvas 和 SVG 之间进行切换。Two.js 的通用性非常强,可以应用于多种类型的网页开发。它可以被应用于创意、动态交互和数据可视化等多种场景。本篇攻略将介绍如何实现使用 Two.js 开发动画效果的示例。 安装 T…

    JavaScript 2023年6月10日
    00
  • JS常见内存泄漏及解决方案解析

    JS常见内存泄漏及解决方案解析 在JavaScript中,内存泄漏是常见的问题之一。当我们创建对象时,Javascript引擎通过自动垃圾回收机制自动处理内存,但如果我们在编写代码时犯了一些错误,就可能会导致内存泄漏。本文将探讨JS常见的内存泄漏问题及解决方案。 什么是内存泄漏? 内存泄漏是指由于被分配的内存没有被及时释放,导致系统内存耗尽或程序性能下降。在…

    JavaScript 2023年6月10日
    00
  • JavaScript实现输入框(密码框)出现提示语

    要实现输入框或密码框出现提示语,通常可以通过JavaScript来实现。以下是实现该功能的具体攻略: 1. 使用placeholder属性 可以利用HTML标准中已有的placeholder属性来为输入框或密码框添加提示语。通过设置placeholder属性,输入框或密码框右侧会出现灰色文字,提醒用户输入内容的要求。当用户开始在输入框或密码框内输入内容时,灰…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部