读取table内容的javascript代码

更新时间：2009年12月14日 02:59:21 作者：

主要用到了js的dom操作，用到了rows 集合。

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>222222 </title> </head> <body> <table border="1" style="border-collapse: collapse" width="45%" height="29" id="table1"> <tr> <td> <input type="checkbox" name="C1" value="ON"> </td> <td>脚本之家</td> <td>www.jb51.net</td> </tr> <tr> <td> <input type="checkbox" name="C2" value="ON"> </td> <td>百度</td> <td>www.baidu.com</td> </tr> <tr> <td> <input type="checkbox" name="C3" value="ON"> </td> <td>服务器软件</td> <td>s.jb51.net</td> </tr> </table> <input type="button" onclick="readArray()" value="取得表格值"> <script> //使用数组取得表格值 function getRowText() { var arr = new Array(); var count = 0; for(var i=0;i <table1.rows.length;i++) { var row = table1.rows[i]; //取得CHECKBOX var objCheck = row.cells[0].getElementsByTagName("INPUT")[0]; //如果CHECKBOX被选中.添加到二维数组 if(objCheck!=null && objCheck.checked) { //arr[i]= row.innerText ; arr[count] = new Array(); for(var x=0;x <row.cells.length;x++) { //不计单选框的单元格内容 if(x==0) continue; arr[count][x-1] = row.cells[x].innerText; } count++; } } return arr; } //读取表格值 function readArray() { var arr = getRowText(); for(var i=0;i <arr.length;i++) { //取得每一行的值 for(var x= 0;x <arr[i].length;x++) { document.write(arr[i][x]); } } } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

定义和用法
rows 集合返回表格中所有行（TableRow 对象）的一个数组，即一个 HTMLCollection。

该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。

语法
tableObject.rows[]实例
下面的例子使用了 rows 集合来显示第一行中的内容：

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

微信小程序按钮巧妙用法
这篇文章主要介绍了微信小程序按钮巧妙用法,按钮组件功能比 HTML 中的 button 按钮丰富，通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等），需要的朋友可以参考下
2022-12-12
uniapp开发小程序的开发规范总结
uni-app 是一个使用 vue.js 开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发小程序的开发规范,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
基于JavaScript实现带缩略图的轮播效果
这篇文章主要为大家详细介绍了基于JavaScript实现带缩略图的轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
不用找了我试过好多次ie、火狐、谷歌浏览器此代码都是不可逆兼容，想把这个问题完全解决，方法就是像其他主流网站一样，下面是我的简单解决方案
2013-03-03
js+csss实现的一个带复选框的下拉框
用js+csss实现的一个带复选框的下拉框，用到了很基础的技术，但是比较实用，喜欢的朋友可以参考下
2014-09-09
es6学习笔记之Async函数的使用示例
async 函数，使得异步操作变得更加方便。它是 Generator 函数的语法糖。下面这篇文章主要给大家介绍了es6学习笔记之Async函数使用的相关资料，文中给出了详细的示例代码，需要的朋友们下面来一起看看吧。
2017-05-05
JS函数的call和apply的实现方法区别分析
这篇文章主要为大家介绍了JS函数的call和apply的实现方法区别分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
利用JavaScript制作一个搞怪的兔子动画效果
又是一年新春之际，祝福大家兔年快乐！给大家介绍一个有趣的动效（兼容 IE），页面右下角有一只搞怪的兔子，鼠标在页面中悬停时，兔子会跟着做出不同的动作和表情，感兴趣的小伙伴可以了解一下
2023-01-01
JS烟花背景效果实现方法
这篇文章主要介绍了JS烟花背景效果实现方法,实例分析了javascript操作dom元素实现烟花特效的技巧,需要的朋友可以参考下
2015-03-03
JS实现可控制的进度条
这篇文章主要为大家详细介绍了JS实现可控制的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03