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 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
js模块加载方式浅析
2017/08/12 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python中pillow知识点学习
2018/04/30 Python
python读取和保存图片5种方法对比
2018/09/12 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python实现批量修改文件名
2020/03/23 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
迪奥美国官网:Dior美国
2019/12/07 全球购物
银行实习生的自我评价
2014/01/13 职场文书
信息员培训方案
2014/06/12 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL