javascript如何遍歷表格數據
介紹如何使用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
><
p
id
=
"result"
></
p
></
p
>
</
body
>
</
html
>
|
以上就是javascript如何遍歷表格數據的用法代碼詳解的詳細內容，更多請關注php中文網其它相關文章！