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 入门讲解1
Apr 15 Javascript
Javascript 函数对象的多重身份
Jun 28 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
Node.js API详解之 console模块用法详解
May 12 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
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP xpath()函数讲解
2019/02/11 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JavaScript中this详解
2015/09/01 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python访问类中docstring注释的实现方法
2015/05/04 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python实现自动登录
2018/09/17 Python
python面向对象法实现图书管理系统
2019/04/19 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
员工安全生产承诺书
2014/05/22 职场文书
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android