【JS】如何获取<tbody>中某一行元素的value？

最新推荐文章于 2022-12-01 21:58:04 发布
最新推荐文章于 2022-12-01 21:58:04 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： JS&amp;HTML&amp;CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaaayl/article/details/100068389
版权
本文介绍了在JavaScript中如何获取HTML表格 tbody 中某一行（tr）的特定单元格（td）的值。通过使用jQuery的closest()和find()方法，结合eq(0)选择器，可以获取到指定列的文本内容。
摘要由CSDN通过智能技术生成

点击修改，在修改界面的文本框中，出现的就是这行记录的值。

初始界面：
在这里插入图片描述

修改界面：
在这里插入图片描述

JS代码：

/*获取表格中某行的学生信息*/
    $("#body").on('click','.update',function () {

       // const no=$(this).closest("tr").find("td").eq(0).text();
        $("#alterSno").val($(this).closest("tr").find("td").eq(0).text());
        $("#alterSname").val($(this).closest("tr").find("td").eq(1).text());
        $("#alterSsex").val($(this).closest("tr").find("td").eq(2).text());
       // delete_Stu(no);
    })

通过$(this).closest(“tr”).find(“td”).eq(0).text()可以获取所要修改的记录的各列的值，this是指修改的那行记录。
$(this).closest(“tr”):定位距离这行记录最近的“tr”标签（即这行记录在哪个tr标签内)
$(this).closest(“tr”).find(“td”).eq(0).text():获取标签内的第一个标签内的值

xxxux_onezero
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取table行 列 的值
03-20
js获取table 中 tr td的值的实例,有需要的朋友可以下下来参考
原生js获取body
11-08 1239
1. doucumnet.body 2. document.getElementsByTagName("body")[0] 转载于:https://www.cnblogs.com/norcoA3/p/6042510.html
<tbody>
立业的博客
12-14 277
■ 定义 <tbody>标签用于定义表格的主体 ■ 使用说明 主要用于放数据本体，使代码在语义上结构更加清晰，没有显示效果上的意义 标签必须放在<table>标签中 ■ 示例 <table> <thead> <tr> <th>...</th> ...
【HTML】js Table单击事件，获取表格行和列及单元格数值的方法
德仔
09-29 8926
【代码】[HTML]js Table单击事件，获取表格行和列及单元格数值的方法。
怎么获取自动生成的tbody中的tr标签的属性值_《HTML常用标签》
weixin_39754603的博客
12-03 754
a标签属性hreftargetdownloadrel=noopenera标签的href取值网址https://baidu.com http://baidu.com //baidu.com路径/a/b/ca/b/cindex.html./index.html伪协议JavaScript：代码mailtotelida的target取值_blank 新的窗口打开_self 当前窗口打开_top_par...
<!DOCTYPE html> <html> <head> <title>表格形式</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; } </style> <script> // 添加一行 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); for(var i = 0; i < 5; i++){ var cell = row.insertCell(i); cell.innerHTML = '<select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild.style.display = 'block'; } cell.firstChild.onblur = function(){ this.style.display = 'none'; } cell.firstChild.style.display = 'none'; } } </script> </head> <body> <table id="myTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> <th>列4</th> <th>列5</th> </tr> </thead> <tbody> <tr> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> <td><select><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select></td> </tr> </tbody> </table> <button onclick="addRow('myTable')">增加</button> </body> </html>将这段代码用bootstrap进行优化
04-23
cell.innerHTML = '<select class="form-control"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select>'; cell.onclick = function(){ this.firstChild...
<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <!-- 数据渲染 --> </tbody> </table> <!-- 弹出层，用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">×</span> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div> </div>添加一个搜索框来进行正则查找和数据显示到五行时可以翻页
05-22
</tbody> </table> <!-- 分页按钮 --> <div id="page-buttons"></div> <!-- 弹出层，用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span ...
<table id="entryDetail"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>宽度铺满滚动和选中删除
最新发布
06-04
您可以使用以下代码来实现您的要求： ...<style> #entryDetail { width: 100%; table-layout: fixed; } th, td { ...在代码的底部，有一个JavaScript函数deleteTableRow(btn)，它将从表格中删除所在行。
<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <!-- 数据渲染 --> </tbody> </table> <!-- 弹出层，用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">×</span> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div> </div>给这个页面添加一个搜索信息的功能使用正则查找
05-22
在页面中添加一个输入框和一个表格，然后使用 JavaScript 监听输入框的输入事件，获取搜索文本的值。接着遍历表格中每一行联系人信息，将姓名、电话、邮箱三个字段的文本内容转换为小写字母，并使用 `match` 方法与...
table 和 tr 获得值
wzj_119的专栏
09-01 2314
<br /><html><br /><head><br /><title> new document </title><br /><script language=javascript> <br />function getTdValue(){ <br />    var oTable = document.getElementById("tbeTarget");<br />    var values = new Array();<br />    var value  = new Array();<br
Jquery - 基础知识（待整理）
yuxuac的专栏
03-07 586
// 本元素相邻的label元素： $("p+ label")   // 本元素之后的所有同级label元素： $("p~ label")   // 本元素下层中的所有span元素 $("div  span")   // 本元素下第一层中的所有span元素 $("div> span")   // 本元素（class="div1"）下 第一个li元素/最后一个li元素/奇，偶
html表格获取当前行数原生js,JavaScript获取表格（table）当前行的值、删除行、增加行...
weixin_42311115的博客
05-31 1292
Js获取 table当前行的值var selectedTr = null;function c1(obj) {obj.style.backgroundColor = 'blue'; //把点到的那一行变希望的颜色;if (selectedTr != null)selectedTr.style.removeAttribute("backgroundColor");if (selectedTr == ...
JQuery专题(四)-JQuery事件操作
专业的计算机毕业设计指南
08-30 396
1.jQuery事件和传统js事件的区别 jQuery提供的事件与传统JS是相同的，但使用的方法却是不同的！下面是onload事件的对比： 不同之处：传统的js的一个事件只能绑定一个函数，而jQuery一个事件可以绑定多个函数。 【示例练习】 <input type="button" value="Click me!" id="mybtn" /> 【需求】 分别使用传统方式和jQu...
jQuery里面用this和用$(this)有什么区别？
看不过的黑工坊
09-09 3093
转自：http://zhidao.baidu.com/question/258783817.html this表示的是javascript提供的当前对象 $(this)表示的是用jquery封装候的当前对象 this对象可以直接用this.style修改样式 $(this)可以使用jquery提供的方法访问样式 比如this.style.display="none"在jquery中可以用$(
[JS之遍历数组对象]学生信息表格获取表单数据
weixin_74792903的博客
12-01 584
将收集到的表单数据存储到数组中.加油!
JS判断复选框是否选中—批量修改table中某个字段的值
咏絮
07-22 485
var tbl = $("#table");//获取表格 //选择下拉框改变事件 tbl.on("change", "select[name$='type)']", function(e){ var val = $(this).val();//获取当前选中的值 var tr = $(this).closest('tr');//获取当前行 var otherTr = tr.siblings();//其它行 var td = $(this).closest('td'); var checkbox =.
jquery tr 移除 背景色_用jQuery remove()方法删除表格行(table tr)的写法
weixin_39969881的博客
12-19 722
jQuery删除表行(table tr)：本文介绍如何删除选定的表行(table tr)。如何用jQuery按钮单击事件，按id或class-name删除表行。 在按钮单击时，我们删除选定的行/ tr可能是其动态添加的表行或已在DOM上使用的。 使用jQuery .on()将能够通过指定其类名或Id来选择动态添加的元素，然后使用.remove()方法删除所选的表行。输出用jQuery remove...
day13 DOMday13 DOM
hu_xingwei的博客
09-07 297
day13 DOM
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值