자바스크립트가 테이블 데이터를 순회하는 방법에 대한 사용 코드에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-22 10:10:081296검색
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. 테이블의 모든 내용을 탐색하는 방법
먼저 테이블에 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>위 내용은 자바스크립트가 테이블 데이터를 순회하는 방법에 대한 사용 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.