使用JavaScript中的for循环和innerHTML获取选定表格行（tr）下的单元格（td）值

最新推荐文章于 2024-05-25 14:02:07 发布
最新推荐文章于 2024-05-25 14:02:07 发布
阅读量219 收藏
点赞数
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laugh666/article/details/133540043
版权
js 专栏收录该内容
527 篇文章 14 订阅 ¥59.90 ¥99.00
订阅专栏

当我们在JavaScript中处理HTML表格时，有时候需要获取选定表格行下的单元格值。本文将介绍如何使用JavaScript的for循环和innerHTML属性来实现这一目标。

我们假设有一个HTML表格，其中包含多个表格行（tr），每行包含多个表格单元格（td）。我们的目标是获取用户选择的表格行下的单元格值，并将其显示在页面上。

首先，我们需要为表格行添加一个点击事件监听器，以便在用户点击行时触发相应的操作。我们可以通过为每个表格行添加一个类名或ID来选择它们，然后使用JavaScript代码来为它们添加事件监听器。

<table id="myTable">
  <tr>
了解本专栏 订阅专栏 解锁全文
大笑编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
订阅专栏
html中获取td的上一级,如何通过JavaScript获取html表td单元格值？
weixin_35839384的博客
06-03 742
不要使用直线JavaScript,将行为与数据分开,并且易于处理.我建议如下：var table = document.getElementById('tableID'),cells = table.getElementsByTagName('td');for (var i=0,len=cells.length; icells[i].onclick = function(){console.log...
vue获取tr内td里面所有内容_JavaScript获取tr td 的三种方式全面总结（推荐）
weixin_39553776的博客
01-12 2057
/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */// $('#selectIds').val("");// var table = document.getElementById("tb_table");//获取第一个表格// var array = table.getElementsByTagName("tr");//所有tr// ...
jS获取table表格任意单元格值
热门推荐
漫随天外的博客
06-07 1万+
jsp页面表格布局Html代码 &lt;body onload="show()"&gt;     &lt;center&gt;        &lt;input type="text" value="111" id="mytext"&gt;        &lt;table border="1" width="60%" id=&quo
js 单击表格某行，获取tr和td
wen_284334906的博客
11-25 2332
js 单击表格行，获取该行tr和td //点击行，获取第一个td值 if (event.srcElement.tagName == "TD") { curRow = event.srcElement.parentElement; tr = curRow.innerHTML; var td = curRow.cells var td_host = td[0].innerHTML } //扩展： //把该行所有的td值放在一个列表中,接上面方法 //var obj = []; // var
php 抓取tr td,JavaScript获取tr td 的三种方式全面总结（推荐）
weixin_42347750的博客
03-21 489
/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */// $('#selectIds').val("");// var table = document.getElementById("tb_table");//获取第一个表格// var array = table.getElementsByTagName("tr");//所有tr// ...
javascript 通过按钮自增行，自增列和修改表格中单元格的值
wxlovezyd的博客
07-12 2285
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> input type="button" value="创建一个空表格" onclick="createTable()"> input type="button" value="添加一行" onclick="addRow(
html中循环生成表格数据,动态生成表格(简单实现)
weixin_30099989的博客
06-04 6034
1.案例分析1.利用对象生成假的数据，用来模拟数据库的数据。2.核心算法：利用createElement生成表格(生成 tr , td )，注意逻辑关系。1.css代码table th {width: 100px;height: 50px;border: 1px solid black;}td {color: green;text-align: center;border: 1px solid b...
读取html <tr> <td>,获取tr td 的三种方式
weixin_42354933的博客
07-08 2480
/*第一种，原生的js，先获取table然后获取tr标签，然后遍历td*///$('#selectIds').val("");//vartable=document.getElementById("tb_table");//获取第一个表格//vararray=table.getElementsByTagName("tr");//所...
js使用for循环与innerHTML获取选中tr下td值
12-11
function getParentEl (el, tagName) { if (!el) return el; do { el = el[removed]; } while(el && el.tagName !== tagName); return el;...//得到选中row的value值 var temp=document.getElementsByName('...var tr = g
JS获取表格内指定单元格html内容的方法
01-19
下面的代码先通过表格对象的rows获得指定的行的所有单元格数组，然后定位指定的单元格，通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> [removed] function cell() ...
JavaScript动态改变表格单元格内容的方法
12-12
JavaScript动态改变表格单元格的内容，下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> [removed] function changeContent() { var x=document.getElementById...
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 269
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1175
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 566
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
vue 使用 export default
global_coding的博客
05-24 346
vue 使用 export default
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
2301_79969279的博客
05-24 1089
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 1147
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
ssm139选课排课系统的设计与开发+vue
最新发布
hjjshua的博客
05-25 1107
互联网的普及，改变了人们正常的生活学习及消费习惯，而且也大大的节省了人们的时间，由于各种管理系统都再不断的增加，更方便了用户，也改良了很多的用户习惯。对于选课排课系统查询方面缺乏系统的管理方式，为提高选课排课系统效率，特开发了本选课排课系统。 选课排课系统的设计主要是对系统所要实现的功能进行详细考虑，确定所要实现的功能后进行界面的设计，在这中间还要考虑如何可以更好的将功能及页面进行很好的结合，方便用户可以很轻松明了的找到自己所需要的信息，还有系统平台后期的可操作性，通过对信息内容的详细了解进行技术的开发。
React18+TypeScript搭建通用中后台项目实战04 封装常用工具函数
Python私教
05-25 412
此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。修改 src/api/request.ts。修改 src/page/Index.tsx。修改 src/page/Index.tsx。修改 src/page/Index.tsx。
js模板字符串如何使用html标签
04-27
要在 JS 的模板字符串中使用 HTML 标签，你可以使用反引号（ ` ）来定义模板字符串，并使用 ${} 来嵌入表达式或变量。例如，以下代码将在页面中显示一个带有段落标签的消息： ``` const message = 'Hello, world!'; const html = `<p>${message}</p>`; document.body.innerHTML = html; ``` 在这个例子中，我们将消息变量嵌入了一个段落标签中，并将结果赋值给一个名为html的变量。然后，我们将这个变量的值赋给document.body.innerHTML，这将在页面中显示我们的消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值