[neitherknows]

Здравствуйте. Нашел тут на форуме схожие темы с решениями, но адаптация под свои нужны не дала плодов.

<table id="02" width="500" height="100">
<tr>
<td>
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td class="select1">
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td class="select">
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img class="select1" src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img class="select1" src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img class="select"src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td>
<img class="select" src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
<tr>
<td>
<img src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td class="select">
<img src="http://javascript.ru/forum/images/smilies/sad.gif"></td>
</tr>
</table>

$('.select').each(function() {
  $( this )
  .on( "mouseover", function() {
    $( '.select' )
    .css( 'opacity', '.2' )
    .css( 'background-color', 'red' )
    });
  $( this )
  .on( "mouseout", function() {
    $( '.select' )
    .css( 'opacity', '' )
    .css( 'background-color', '' )
    });
  return;
});

$('.select1').each(function() {
  $( this )
  .on( "mouseover", function() {
    $( '.select1' )
    .css( 'opacity', '.2' )
    .css( 'background-color', 'red' )
    });
  $( this )
  .on( "mouseout", function() {
    $( '.select1' )
    .css( 'opacity', '' )
    .css( 'background-color', '' )
    });
  return;
});

Какие есть варианты оптимизации скрипта, чтобы не нужно было для каждой группы элементов прописывать новую переменную?