Получить значение ячейки таблицы

Сегодня достаточно специфическая тема и пример – получении значений у определенной ячейки в таблице

Допустим у нас есть html таблица:
<table border="1" cellpadding="5" cellspacing="5"> 
 <tr> 
       <td><b>Имя</b></td> 
       <td><b>Фамилия</b></td> 
       <td><b>Дата рождения</b></td> 
  </tr> 
 <tr> 
       <td>Ваня</td> 
       <td>Иванов</td> 
       <td>01,08,1960</td> 
  </tr> 
 <tr> 
       <td>Петя</td> 
       <td>Петров</td> 
       <td>02,09,1965</td> 
  </tr> 
</table>

И мы хотим получить:

1) Получить значение 2-го ряда, 2-й ячейки

2) Получить значение 1-го ряда, 3-й ячейки

3) Получить значение 3-го ряда, 1-й ячейки

для этого создадим 3-и html кнопки, дабы при нажатии на них выполнялось определенное событие:
<input type="button" value="Получить значение 2-го ряда, 2-й ячейки" id="b1" /> 
<input type="button" value="Получить значение 1-го ряда, 3-й ячейки" id="b2" /> 
<input type="button" value="Получить значение 3-го ряда, 1-й ячейки" id="b3" />

Как видите у каждой кнопки свой ID b1, b2, b3. Теперь давайте создадим jquery скрипт который будет выполнять событие при клике и делать выборку необходимых ячеек.
<script> 
$(document).ready(function() { 
    $("#b1").click(function () { 
     var result = $("table tr:eq(1) td:eq(1)").html(); 
     alert(result); 
    }); 
    $("#b2").click(function () { 
     var result = $("table tr:eq(0) td:eq(2)").html(); 
     alert(result); 
    }); 
    $("#b3").click(function () { 
     var result = $("table tr:eq(2) td:eq(0)").html(); 
     alert(result); 
    }); 
}); 
</script>

Как видите – для определения нужной ячейки я использовал селектор :eq(), отсчет у которого начинается нуля. То есть, например в первом примере – я задал номер столбца (с тегом tr), далее я задал номер ячейки в этом столбце (с тегом td)
Теги:
ячейка, таблица, :eq()
Добавлено: 17 Сентября 2013 12:05:33 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...