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 取值、赋值的基本方法整理
Mar 31 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
node网页分段渲染详解
Sep 05 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
vue-iview动态新增和删除的方法
Jun 17 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连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php获取远程文件内容的函数
2015/11/02 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python进程间通信用法实例
2015/06/04 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python中扩展包的安装方法详解
2017/06/14 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python3 max()函数基础用法
2019/02/19 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
python爬取音频下载的示例代码
2020/10/19 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
python 批量将中文名转换为拼音
2021/02/07 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
幼儿园开学家长寄语
2014/01/19 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript