Здравствуйте.
Мне нужно сделать выделение строки в таблице нажатием левой кнопки мыши. Завел по булевой переменной (выделено/не выделено) в каждом элементе строки. По нажатию просто меняю значение соответствующей переменной на противоположное и в зависимости от нового значения назначаю цвет background-color.
В хроме мой код работает, а в эксплорере - нет. После первого клика строка перекрашивается, если повторно кликнуть по строке она не перекрашивается, хотя в текстовое поле выводится, что соответствующая переменная - false - должно перекраситься. alert'ом проверил - управление заходит в код, который назначает background-color:inherit, но цвет-то все равно не меняется на "наследованный" от таблицы.
Мне нужно именно для эксплорера сделать, не могу разобраться в чем дело, уже перегуглился ( помогите пожалуйста!
Вот код страницы:
[HTML]<html>
<head>
</head>
<style type="text/css">
.table-data-style {
background-color: gray;
cursor:default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript">
var selectionColor = "red";
function getherSelection() {
var selected = "";
$("#table-data > tbody > tr").each(function (index, value) {
if (value.isSelected) {
selected += index + ";";
}
});
return selected;
}
function printSlected() {
$("#selectedDisplayer").val(getherSelection());
}
$(document).ready(function() {
$("#table-data > tbody > tr").each(function (index, value) {
value.isSelected = false;
});
$("#table-data > tbody > tr").click(function() {
this.isSelected = !this.isSelected;
if (this.isSelected) {
$(this).css("background-color", selectionColor);
} else {
$(this).css("background-color", "inherit");
}
printSlected();
});
});
</script>
<body>
<div onselectstart="return false;">
<table id="table-data" class="table-data-style">
<thead>
<tr><th>header 1</th><th>header 2</th><th>header 3</th></tr>
</thead>
<tbody>
<tr><td>data00</td><td>data01</td><td>data02</td></tr>
<tr><td>data10</td><td>data11</td><td>data12</td></tr>
<tr><td>data20</td><td>data21</td><td>data22</td></tr>
<tr><td>data30</td><td>data31</td><td>data32</td></tr>
<tr><td>data40</td><td>data41</td><td>data42</td></tr>
<tr><td>data50</td><td>data51</td><td>data52</td></tr>
<tr><td>data60</td><td>data61</td><td>data62</td></tr>
<tr><td>data70</td><td>data71</td><td>data72</td></tr>
<tr><td>data80</td><td>data81</td><td>data82</td></tr>
<tbody>
</table>
<input id="selectedDisplayer" type="text" value="" style="width:100%"/>
</div>
<body>
</html>[/HTML]