<table class="border">
<tr>
<th>col 1</th><th>col 2</th><th>col 3</th>
</tr>
<tr>
<td>val 1.1</td><td>val 1.2</td><td>val 1.3</td>
</tr>
<tr>
<td>val 2.1</td><td>val 2.2</td><td>val 2.3</td>
</tr>
<tr>
<td>val 3.1</td><td>val 3.2</td><td>val 3.3</td>
</tr>
<tr>
<td colspan=2>Итого:</td><td>Игого!!!</td>
</tr>
</table>есть css
table.border td{
border: 1px solid #fff;
background-color:#fff;
}
.border {
border-style:0 none solid;
}
есть код на jQuery
// when document ready
jQuery().ready(function($){
// each td bind onclick
$("table.border td").click(function(){
// all td reset styles
$("table.border td").css({'background-color':'#fff','border':'1px solid #fff'})
// count of previous td's
var index = $(this)
// this td paint in gray
.css({'background-color':'#D2D6D9','border':'1px solid #D2D6D9'})
// get all previou td's in this row
.prevAll()
// and apply new style to them
.css({'border-top':'1px solid #D2D6D9','border-bottom':'1px solid #D2D6D9'}).length
// correction for colspan in first td
var itogo = parseInt($(this).parent().children(":first").attr("colspan"));
// apply correction
index += itogo ? itogo-1 : 0;
// all td's which equals this in previous rows
$(this).parent().prevAll().find("td:eq("+index+")")
// also has borders
.css({'border-left':'1px solid #D2D6D9','border-right':'1px solid #D2D6D9'})
})
})
1 вся эта хрень корректно работает в фаерфоксе 3 и наверное 2
2 осел и опера не хотят обнулять стили всех ячеек таблицы в строчке
$("table.border td").css({'background-color':'#fff','border':'1px solid #fff'})3 осел начинает работать корректно если все "1px" заменены на "2px"
4 все 3 браузера работаю более мение нормально если заменить "1px solid #fff" на "none" но тогда начинают прыгать столбцы изза расширения границ
жду любые предложения
