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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
解决Vue watch里调用方法的坑
Nov 07 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之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
php实现微信支付之现金红包
2018/05/30 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
7个JS基础知识总结
2014/03/05 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python实现京东秒杀功能
2018/07/30 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Django跨域请求原理及实现代码
2020/11/14 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
舞蹈教育学专业求职信
2014/06/29 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
黄石寨导游词
2015/02/05 职场文书
计算机教师工作总结
2015/08/13 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js