js中获取 table节点各tr及td的内容简单实例


Posted in Javascript onOctober 14, 2016
<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0">
    <tr>
        <td height="25">第一行</td>
    </tr>
    <tr>
        <td height="25">第二行</td>
    </tr>
    <tr>
        <td height="25">第三行</td>
    </tr>
    <tr>
        <td height="25">第四行</td>
    </tr>
		 <tr>
        <td height="25"><input type="button" name="getTableContent" value="获得表格内容" onclick="getTableContent(this)"></td>
    </tr>
</table>

如上所示代码,按钮点击事件中传入this对象,此对象就是按钮本身。通过以下方法测试获取表格的数据

<script language="javascript">
    function getTableContent(node) {
// 按钮的父节点的父节点是tr。
		  var tr1 = node.parentNode.parentNode;
			alert(tr1.rowIndex);
			alert(tr1.cells[0].childNodes[0].value); //获取的方法一
alert(tr1.cells[0].innerText); 
// 通过以下方式找到table对象,在获取tr,td。然后获取td的html内容
        var table = document.getElementById("tb1");//获取第一个表格
		
        var child = table.getElementsByTagName("tr")[rowIndex - 1];//获取行的第一个单元格
				
        var text = child.firstChild.innerHTML;
        window.alert("表格第" + rowIndex + "的内容为: " + text);
    }
</script>

以上就是小编为大家带来的js中获取 table节点各tr及td的内容简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
jQuery ajaxForm()的应用
Oct 14 #Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 #Javascript
jQuery如何防止Ajax重复提交
Oct 14 #Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 #Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 #Javascript
js插件Jcrop自定义截取图片功能
Oct 14 #Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 #Javascript
You might like
php生成QRcode实例
2014/09/22 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
php实现删除空目录的方法
2015/03/16 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
原生JS实现天气预报
2020/06/16 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
python如何将图片转换为字符图片
2020/08/19 Python
在python中实现对list求和及求积
2018/11/14 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
以下的初始化有什么区别
2013/12/16 面试题
职工代表大会主持词
2014/04/01 职场文书
农业开发项目建议书
2014/05/16 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技