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 相关文章推荐
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
微信公众号服务器验证Token步骤图解
Dec 30 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中如何防止表单的重复提交
2013/08/02 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python中tell()方法的使用详解
2015/05/24 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
世界上最大的艺术社区:SAA
2020/12/30 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
市场营销计划书
2015/01/17 职场文书
焦裕禄观后感
2015/06/03 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
结婚纪念日感言
2015/08/01 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL