반응형
이번에는 제목의 내용과 같이 Table tag에서 선택한 (click 등의 이벤트)에서 Row Index, Column Index를 가져오는 것을 테스트 하려 한다.
아래의 스크립을 참조 하면 간단할 듯 싶다.
<!doctype html>
<html lang="en">
<head>
<style>
table{
border:1px solid #ddd
}
td{
border:1px solid #ddd
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('td').click(function(){
// index는 0부터 시작
var rowIndex = $(this).parent().parent().children().index($(this).parent());
var colIndex = $(this).parent().children().index($(this));
alert(rowIndex +"/"+ colIndex);
});
});
</script>
<title>Document</title>
</head>
<body>
<div>
<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>
</div>
</body>
</html>
반응형
'Development > Javascript' 카테고리의 다른 글
| jqGrid 멀티셀렉트 시 CheckBox에서만 Check (0) | 2015.03.12 |
|---|---|
| c# phatomJS를 이용한 WebBrowser Screenshot (0) | 2015.02.05 |
| jquery layout (0) | 2015.01.07 |
| Javascript GUID 생성 (0) | 2015.01.05 |
| iframe 의 parent function 호출 (0) | 2014.12.24 |
