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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
vue实现登录功能
Dec 31 Vue.js
JS Object构造函数之Object.freeze
Apr 28 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/07/22 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
php解析url的三个示例
2014/01/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php定时执行任务设置详解
2015/02/06 PHP
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
react+antd 递归实现树状目录操作
2020/11/02 Javascript
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Django模板Templates使用方法详解
2019/07/19 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
公司担保书格式范文
2014/05/12 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
员工年终考核评语
2014/12/31 职场文书
文体活动总结
2015/02/04 职场文书
教师个人教学总结
2015/02/11 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
复兴之路观后感
2015/06/02 职场文书
python字典的元素访问实例详解
2021/07/21 Python