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 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javascript解析json实例详解
2014/11/05 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
深入理解node.js http模块
2018/01/24 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
python数组复制拷贝的实现方法
2015/06/09 Python
简单谈谈python的反射机制
2016/06/28 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
python创建文本文件的简单方法
2020/08/30 Python
thinkphp5 路由分发原理
2021/03/18 PHP
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
降消项目实施方案
2014/03/30 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
中学总务处工作总结
2015/08/12 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
基于Golang 高并发问题的解决方案
2021/05/08 Golang
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL