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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 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 引用是个坏习惯
2010/03/12 PHP
php文件操作实例代码
2012/05/10 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
php压缩文件夹最新版
2018/07/18 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
python条件和循环的使用方法
2013/11/01 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
支部鉴定材料
2014/06/02 职场文书
财务整改报告范文
2014/11/05 职场文书
婚礼新人答谢词
2015/01/04 职场文书
JavaScript前端面试组合函数
2022/06/21 Javascript