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 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
Vuex中实现数据状态查询与更改
Nov 08 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 单引号与双引号的区别
2009/11/24 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
制作特殊字的脚本
2006/06/26 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python中文编码那些事
2014/06/25 Python
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
说一说Python logging
2016/04/15 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python语言进阶知识点总结
2019/05/28 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
职务任命书范本
2014/06/05 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
军训新闻稿范文
2015/07/17 职场文书
2019消防宣传标语!
2019/07/10 职场文书