Показать сообщение отдельно
  #3 (permalink)  
Старый 24.08.2012, 19:30
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<style type="text/css">

#My:hover tr#first td{
     background-color:cyan;
}
.selected-2 {
    background-color:#FCCEFC;
}
.selected {
    background-color:cyan;
}
</style>


<table id=My  border="1" cellspacing="2">
    <tbody>
  <tr id=first>
     <td colspan=4>ячейка 1</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
  <tr>
     <td>ячейка 5</td><td>ячейка 6</td><td>ячейка 7</td><td>ячейка 8</td>
  </tr>
</tbody></table>



<script type="text/javascript">
$('#My tr:not("#first")').each (function() {
   $(this).find('td').each (function(i) {
     $(this).addClass('Col-'+i);
   });
});

$("#My  td[class^='Col-']").mouseenter(function() {
   var I=$(this).parent().find('td').index(this);
   $("#My td[class^='Col-"+I+"']").addClass('selected');
   $(this).parent().find('td').addClass('selected-2')
 }).mouseleave(function(){
   var I=$(this).parent().find('td').index(this);
   $("#My td[class^='Col-"+I+"']").removeClass('selected')
   $(this).parent().find('td').removeClass('selected-2')
 });
</script>
Ответить с цитированием