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 Timing
Apr 21 Javascript
Prototype Function对象 学习
Jul 12 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
Javascript玩转继承(三)
May 08 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 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简单的留言板与回复功能具体实现
2014/02/19 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
python在协程中增加任务实例操作
2021/02/28 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
实习自我评价怎么写
2013/12/02 职场文书
写自荐信要注意什么
2013/12/26 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
寄语是什么意思
2014/04/10 职场文书
岗位明星事迹材料
2014/05/18 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
运动会100米加油稿
2015/07/21 职场文书