js遍历获取表格内数据的方法(必看)
本文将介绍如何使用js获取表格内某一单元格的内容，表格由table,tr,td等html标记组成。table表示表格，tr表示行，td表示行中列。
1、一般的表格结构如下
<table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr> <td>2</td> <td>wing</td> </tr> </table>
2、遍历表格中所有内容方法
首先需要給table加上id，这样方便定位到哪一个表格，例如
<table id="mytable"></table>
获取表格行数
<script type="text/javascript">
/**
* 获取表格行数
* @param Int id 表格id
* @return Int
*/
function getTableRowsLength(id){
var mytable = document.getElementById(id);
return mytable.rows.length;
}
</script>
获取表格某一行列数
<script type="text/javascript">
/**
* 获取表格某一行列数
* @param Int id 表格id
* @param Int index 行数
* @return Int
*/
function getTableRowCellsLength(id, index){
var mytable = document.getElementById(id);
if(index<mytable.rows.length){
return mytable.rows[index].cells.length;
}else{
return 0;
}
}
</script>
遍历表格内容保存到数组
<script type="text/javascript">
/**
* 遍历表格内容返回数组
* @param Int id 表格id
* @return Array
*/
function getTableContent(id){
var mytable = document.getElementById(id);
var data = [];
for(var i=0,rows=mytable.rows.length; i<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
if(!data[i]){
data[i] = new Array();
}
data[i][j] = mytable.rows[i].cells[j].innerHTML;
}
}
return data;
}
</script>
3、遍历表格内容完整例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title> 获取表格内容 </title>
<style type="text/css">
table{width:300px; border:1px solid #000000; border-collapse:collapse;}
td{border:1px solid #000000; border-collapse:collapse;}
</style>
<script type="text/javascript">
/**
* 遍历表格内容返回数组
* @param Int id 表格id
* @return Array
*/
function getTableContent(id){
var mytable = document.getElementById(id);
var data = [];
for(var i=0,rows=mytable.rows.length; i<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
if(!data[i]){
data[i] = new Array();
}
data[i][j] = mytable.rows[i].cells[j].innerHTML;
}
}
return data;
}
/**
* 显示表格内容
* @param Int id 表格id
*/
function showTableContent(id){
var data = getTableContent(id);
var tmp = '';
for(i=0,rows=data.length; i<rows; i++){
for(j=0,cells=data[i].length; j<cells; j++){
tmp += data[i][j] + ',';
}
tmp += '<br>';
}
document.getElementById('result').innerHTML = tmp;
}
</script>
</head>
<body>
<table id="mytable">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>fdipzone</td>
</tr>
<tr>
<td>2</td>
<td>wing</td>
</tr>
</table>
<p><input type="button" name="btn" value="获取表格数据" onclick="showTableContent('mytable')"></p>
<p><div id="result"></div></p>
</body>
</html>
以上这篇js遍历获取表格内数据的方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JS获取表格内指定单元格html内容的方法
本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;
-
JS中获取数据库中的值的方法
实施过程如下: 1.引用Ajax.dll 2.在App_Code写具体的方法,最好单独建立一个类文件,然后写具体方法. 复制代码 代码如下: public class AjaxMethod www.jb51.net{ public AjaxMethod() { // //TODO: 在此处添加构造函数逻辑 // } [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirem
-
JS与jQuery遍历Table所有单元格内容的方法
本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /
-
利用JS轻松实现获取表单数据
接触过Angularjs的都知道,ng支持双向绑定,我们可以轻轻松松的通过ngModel将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了.那对于我们开发前台网站,不用ng一类的MVVM框架,只引用了Jquery,那么在处理表单的时候该怎么做呢. 一. 原始做法 <div id="form"> <select id='select1'> <option value="">--请选择--<
-
js遍历获取表格内数据的方法(必看)
本文将介绍如何使用js获取表格内某一单元格的内容,表格由table,tr,td等html标记组成.table表示表格,tr表示行,td表示行中列. 1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr
-
ajax调用返回php接口返回json数据的方法(必看篇)
php代码如下: <?php header('Content-Type: application/json'); header('Content-Type: text/html;charset=utf-8'); $email = $_GET['email']; $user = []; $conn = @mysql_connect("localhost","Test","123456") or die("Failed in conn
-
SpringMVC 数据校验方法(必看篇)
数据校验在web应用里是非常重要的功能,尤其是在表单输入中.在这里采用Hibernate-Vapdator进行校验,该方法实现了JSR-303验证框架支持注解风格的验证. 一.导入jar包 若要实现数据校验功能,需要导入必要的jar包,主要包括以下几个: classmate-1.3.1.jar hibernate-vapdator-5.4.1.Final.jar hibernate-vapdator-annotation-processor-5.4.1.Final.jar hibernate-v
-
js两种拼接字符串的简单方法(必看)
如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var
-
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单业务的明细数据的时候,看起来会比弹出窗口录入方便一些,也高大上一点.本篇主要介绍在Bootstrap开发框架中使用dataTable直接录入表格行数据. 1.基于表格直接录入数据和Winform的界面回顾 在开始Web界面直接录入表格行数据前,我们先来看看Winform界面的处理情况,如我在流程管理
-
js遍历json对象所有key及根据动态key获取值的方法(必看)
实例如下: var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 以上这篇js遍历json对象所有key及根据动态key获取值的方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
JS实现控制表格内指定单元格内容对齐的方法
本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制表格单元格的内容向右对齐 <!DOCTYPE html> <html> <head> <script> function alignCell() { document.getElementById('td1').align="right"; } </script> </head> <body> &l
-
JS实现两表格里数据来回转移的方法
本文实例讲述了JS实现两表格里数据来回转移的方法.分享给大家供大家参考.具体分析如下: 最近做项目里用到了一个 两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮 感觉写得有点繁琐了,有时间再改进哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml
-
JS实现table表格内针对某列内容进行即时搜索筛选功能
本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能.分享给大家供大家参考,具体如下: 往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选. 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器,降低用户体验度,这时,要是有个纯js操作,进行表格某列的即时筛选,这样既能提高搜索速度,也不用占用服务器资源,用户自然也满意. 实现如下,先看效果图, 开始状态: 在输入框内输入'e',表格即