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中name的意义冲突示例介绍
May 29 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue filter 完美时间日期格式的代码
Aug 14 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/05/24 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
AngularJS内置指令
2015/02/04 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
python中dir函数用法分析
2015/04/17 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
物理力学求职信
2014/02/18 职场文书
大学军训感言600字
2014/02/25 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
如何写新闻稿
2015/07/18 职场文书
党性修养心得体会2016
2016/01/21 职场文书