Главная » Вебмастеру » Доступ к таблице в JQuery

Доступ к таблице в JQuery

Примеры:

1. Как получить доступ к ячейкам таблицы по индексу при помощи JQuery.
2. Как получить номер строки и номер ячейки таблицы. (Кликните по ячейке таблицы)
3. Как получить id таблицы из ячейки по this

№	Фамилия	Имя	Возраст
1	Иванов	Иван	22
2	Петров	Петр	25

Пример

<html>
<script src="https://yandex.st/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){ //Стартует по загрузке
 $('#tblExport td').click(function(){// Запускаем по клику на ячейке.
	//Узнаем индекс строки + индекс ячейки таблицы
	alert( 'tr:'+$(this).parent('tr').index() +' td:'+ $(this).index());
	//Узнаем id родительской таблицы из ячейки
	alert('id таблицы = '+$(this).parent('TR').parent('TBODY').parent('TABLE').attr('id'));
 });
});	

function tableList(){
 var MyRows = $('table#tblExport').find('tr');
 var MyCols = MyRows.first().find('td').length;
 var tr='| ';
 //alert(MyCols);
 for (var i = 0; i < MyRows.length; i++){
  tdSet=$(MyRows[i]).find('td');
  for (var j = 0; j < MyCols; j++) tr= tr + j +':'+ $(tdSet[j]).text()+' | ';
  alert(tr);
  tr='| ';
 }
}
</script>

<table id="tblExport" border=1>
<tr><td>№</td><td>Фамилия</td><td>Имя</td><td>Возраст</td></tr>
<tr><td>1</td><td>Иванов</td><td>Иван</td><td>22</td></tr>
<tr><td>2</td><td>Петров</td><td>Петр</td><td>25</td></tr>
</table><br>
<button onClick=tableList()>Перебор строк и ячеек таблицы</button>