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 相关文章推荐
iframe子页面获取父页面元素的方法
Nov 05 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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 图片上传代码
2011/09/13 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
详解python开发环境搭建
2016/12/16 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python读写csv文件方法详细总结
2019/07/05 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
夜不归宿检讨书
2014/02/25 职场文书
任命书格式
2014/06/05 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
改进工作作风心得体会
2016/01/23 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python