js 单击表格某行，获取tr和td

最新推荐文章于 2023-06-28 17:06:38 发布
最新推荐文章于 2023-06-28 17:06:38 发布
阅读量2.3k 收藏 4
点赞数
分类专栏： Web前端 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wen_284334906/article/details/110119518
版权
本文介绍如何使用JavaScript实现单击HTML表格的某一行时，获取对应的TR和TD元素，为表格操作提供便利。
摘要由CSDN通过智能技术生成

js 单击表格行，获取该行tr和td

//点击行，获取第一个td值
//函数名和tr设定的onClick名一样
function change_disk(){
   
if (event.srcElement.tagName == "TD") {
   
		curRow = event.srcElement.parentElement;
		tr = curRow.innerHTML;
		var td = curRow.cells
		var td_host = td
最低0.47元/天 解锁文章
Paul_Wen……
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[简单]js获取tr内td数量及值
小瓜的博客
06-20 4037
        如题，代码如下：         <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js获取tr内td数量及值</title> <style> * { font-family: 'MIC
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
12-29
本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考，具体如下： html部分： <tr> ;>序号 班次 分组 操作 </tr> <tr ng-repeat=value> <td width=40px;>{...
JS通过点击/选择表格某一行的获取当前行的数据（结尾有VUE思路）
热门推荐
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
01-28 2万+
问题一：当我们在表格中会有以下点击按钮，然后获取该行的某列信息； 在 修改按钮 上设置 οnclick="edit(this)" function edit(val){ //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思 var value = $(val).parent().parent().find("td"); ...
JavaScript获取tr td 的三种方式全面总结（推荐）
01-19
/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr);//所有tr // for(var i = 1; i < array.length; i++) { // var id = array[i].children; // var id
JS 获取鼠标所点击表格中的某行某列的值
weixin_34119545的博客
12-03 2605
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/laydate-v1.1/laydate/laydate.js"></script> <script type="text/javascr...
jq循环tr获取第一个td的值
西风XF的博客
01-29 1万+
在for循环tr内获取值: var firstTdText = tr[i].find('td').eq(0).text(); 这种方法会报错，tr[i].find is not a function。是因为tr[i]得到的是原生的tr解构，因为原生js没有find()方法，所以会报错： console.log(tr[i]); 解决方法一： var firstTdText = $(tr
js获取选中tr下td值
jad's blog
09-24 2423
function getParentEl (el, tagName) {     if (!el) return el;       do {         el = el.parentNode;     } while(el &amp;&amp; el.tagName !== tagName);           return el; }   ...
JS获取单击按钮单元格所在行的信息
10-25
在JavaScript中，获取用户在网页上交互时点击的特定元素及其相关信息是一项常见的需求，尤其是在处理表格数据时。本文将详细讲解如何在JavaScript中实现当用户点击表格内的按钮单元格时，获取该按钮所在的行信息。 ...
jQuery JSON动态获取表格数据代码
06-10
在本文中，我们将深入探讨如何使用jQuery和JSON来动态获取并显示表格数据。这个主题主要集中在利用jQuery的灵活性和JSON的轻量级数据交换格式，为网页中的表格提供动态加载和交互功能。以下是对给定标题和描述的详细...
js tr控制下面的tbody隐藏和显示
10-30
本例中，作者希望当点击表格中的某一行 (`tr`) 时，能够控制该行后面的一行（通常是包含数据的 `tbody`）的显示或隐藏状态。这一需求看似简单，但在实际开发过程中可能会遇到不少挑战，特别是对于初学者而言。 ####...
js中获取 table节点各tr及td的内容简单实例
10-21
下面小编就为大家带来一篇js中获取 table节点各tr及td的内容简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Js获取table当前tr行的值的代码
10-29
table tr行内td里面的input的值
获取表格当前行数的JS代码
03-07
这是一个JS获得表格当前行数的例子，也就是你的鼠标在那一行 JS都可以帮你获得行数。
用JS在点击时获取table里多组tr中某个td的内容
weixin_40758850的博客
03-17 2331
获取tr中某个td的内容 把要被获取的td设置相同的className，然后通过className获取td，再循环遍历td并获取它的内容，并将之暂存到一个新数组中。 以下时我的例子： 做一个私信界面， 点击某个私信小图标跳出一个界面，把对应的td的内容（名字）输出显示在这个界面： //获取所有图标 var privateImgs=document.getElementsByClassName(&quot;p...
js表格中通过某行按钮获取本行其他数据
谁的博客
07-18 4300
描述 $('.demo').on('click', function(){ var tem = $(this).parents("tr").find(".classId").val(); }); 解释 .demo：表格中某一行的按钮的class .classId：点击的按钮所在行的某个class $(this)：获取所点击的按钮 $(this).parents("tr")：获...
js 获取 table所有tr标签下第一个td的值
最新发布
lwdfzr的博客
06-28 813
<table class="gridtable"> <thead> <tr> <th style="width: 20px;"> <input type="checkbox" name="allCheck" onclick="checkAll('allCheck', 'itemCheck')"> </th> <th >店铺&lt
js中获取 table节点各tr及td的内容方法
m0_37346206的博客
10-22 5929
<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td> </.
JavaScript- onclick获取同行其它td的值
weixin_30802171的博客
12-17 771
1 <table class="table table-bordered "> 2 <tr class="control-label"> 3 @for (int i = 0; i < 5; i++) 4 { 5 <th>ColumnName_@i</th> ...
js获取表格的当前行
jdq819的专栏
04-29 2829
   Table Test           function Delete()   {    var dgTable=document.getElementById(tb).rows;//tb为table的ID,    var pp=window.event.srcElement;         for (var i=0; i     {     if(pp==dgTable[i].ce
javascript单击链接删除行
05-16
你可以使用以下代码来实现单击链接删除行的功能： ```html <table id="myTable"> <tr> <td>Row 1</td> <td><a href="#" class="delete-row">Delete</a></td> </tr> <tr> <td>Row 2</td> <td><a href="#" class="delete-row">Delete</a></td> </tr> <tr> <td>Row 3</td> <td><a href="#" class="delete-row">Delete</a></td> </tr> </table> <script> var deleteLinks = document.getElementsByClassName('delete-row'); for (var i = 0; i < deleteLinks.length; i++) { deleteLinks[i].addEventListener('click', function(e) { e.preventDefault(); this.parentNode.parentNode.remove(); }); } </script> ``` 这段代码会为所有类名为 `delete-row` 的链接添加点击事件监听器，当用户点击链接时，它会阻止默认行为（即跳转到链接的 URL），然后删除该链接所在的行。你只需要将 `myTable` 替换为你的表格的 ID，就可以在你的表格中使用此代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值