<style>
table {
 width:100%;
}
#Mytable td{
 padding:4px;
 cursor:pointer;
 height:50px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>



<b>Кликните по ячейке шахмат, затем выберите eё цвет</b> (<font color="#32F3FF">цвет можно перебирать</font>)<br /><br />
                        <table id="Color" cellspacing="0" cellpadding="0">
                          <tbody>
                            <tr>
                              <td style="background-color:black">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:silver">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:gray">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:white">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:maroon">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:red">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:purple">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:fuchsia">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:green">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:lime">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:olive">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:yellow">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:navy">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:blue">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:teal">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                              <td style="background-color:aqua">
                                <img width=100% height=100% src="http://designforum.bestff.ru/i/blank.gif">
                              </td>
                            </tr>
                          </tbody>
                        </table><br /><br />
<b>"Шахматная доска"</b>
                        <table border="1" id="Mytable" cellspacing="0" cellpadding="0">
                            <tbody>
                              <tr>
                                <td>ячейка 1  </td>
                                <td>ячейка 2  </td>
                                <td>ячейка 3  </td>
                                <td>ячейка 4  </td>
                              </tr>
                              <tr>
                                <td>ячейка 5  </td>
                                <td>ячейка 6  </td>
                                <td>ячейка 7  </td>
                                <td>ячейка 8  </td>
                              </tr>
                              <tr>
                                <td>ячейка 9  </td>
                                <td>ячейка 10  </td>
                                <td>ячейка 11 </td>
                                <td>ячейка 12 </td>
                              </tr>
                              <tr>
                                <td>ячейка 13  </td>
                                <td>ячейка 14  </td>
                                <td>ячейка 15 </td>
                                <td>ячейка 16 </td>
                              </tr>
                            </tbody>
                          </table>
<script type="text/javascript">
$(document).ready(function(){
var ColorArr = ['ffffff','ffffff'];
var IndArr=0;
$("#Mytable td").click(function(){ //alert('Выберите цвет яейки!')
   var tr = $(this).parent('tr');
   IndArr = ($(this).parents('table').find('tr').index(tr)+tr.find('td').index($(this)))%2;

   $("#Color td > img").bind('click',function(){
     IndArr = IndArr%2;
     ColorArr[IndArr]=$(this).parent().css('background-color');
     $("#Mytable tr").each(function(j){
       $(this).find("td").each(function(i){
         var ind = (i+j)%2;
         $(this).css({'background-color':ColorArr[ind]});
       });
     });
   });  $("#Color td > img").ubind('click');

});
});
</script>