Не работает .addClass и .css(a,b). У тега <tr> не меняет свойство.
Вложений: 1
Здравствуйте, столкнулся с проблемой, не могу явой на наведение мыши подсветить строки в таблице, примеры работают и именно на моем сайте не срабатывает.
индекс.html выводится сначала через php echo. Помогите пожалуйста разобраться в чем дело. В firebug заходит в событие и все ок, но цвета не меняет.. (дополнительно см. скриншот) Вот моя таблица:
<div class="table">
<table class="mTable">
<tr class="table_head"> <th colspan="3">  Последние добавленные</th> </tr>
<tr class="column_caption"> <td>Регион, Населенный пункт </td> <td>Тип товара</td> <td>Цена</td> </tr>
<tr class="blue"> <td>/tbtitle0/ </td> <td>/tbtitle1/ </td> <td>/tbtitle2/</td> </tr>
<tr> <td>/tbtitle3/ </td> <td>/tbtitle4/ </td> <td>/tbtitle5/</td> </tr>
<tr class="blue"> <td>/tbtitle6/</td> <td>/tbtitle7/ </td> <td>/tbtitle8/</td> </tr>
<tr> <td>/tbtitle9/</td> <td>/tbtitle10/ </td> <td>/tbtitle11/</td> </tr>
<tr class="blue"> <td>/tbtitle12/ </td> <td>/tbtitle13/ </td> <td>/tbtitle14/</td> </tr>
<tr> <td>/tbtitle15/ </td> <td>/tbtitle16/ </td> <td>/tbtitle17/</td> </tr>
</table>
<div class="expand_button">
<!--<a href="./view_new.php"><img src="img/expand_button.png" alt="Раскрыть список"></a>-->
<form method="POST" action="./view_new.php">
<input type="image" name="view1" src="img/expand_button.png">
<input type="hidden" name="view" value="1">
</form>
</div>
</div><!-- end table-->
CSS для таблицы style.css
.table {
padding: 0px;
margin: 25px 0 30px 0px;
width: 600px;
height: 170px;
}
table, td, th {
border: 1px solid #cbccdc;
text-align: center;
background-color: #f4f4f4;
vertical-align: bottom;
}
table {
width: 600px;
height: 175px;
border-collapse: collapse;
}
tr.blue td { /* Через строчная раскраска таблицы */
background-color: #e7e3f1;
}
tr.table_head th { /* Заголовок таблицы */
background-image: url(../img/table_header.jpg);
color: #ffffff;
text-align: left
}
другой CSS js.css который через заголовок подключаю:
.svet {
background-color: #FFFFFF;
}
И сам код который не срабатывает, jquery. tables.js
//debugger;
$(document).ready(function() {
var tableStr = $('.mTable tr');
tableStr.mouseover(function(){
$(this).addClass('svet');
});
tableStr.mouseout(function(){
$(this).removeClass('svet');
});
});
Заголовки так покдлючаю:
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/js.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tables.js"></script>
|
divine108,
.svet {
background-color: #FFFFFF;
}
замените на
tr.svet td {
background-color: #FFFFFF;
}
если не поможет есть ещё вариант |
Спасибо! Сработало!
Объясните пожалуйста, в чем дело было..? И я не совсем понял вашу запись, если не сложно можете объяснить? п.с. и еще вопрос по пути, как исключить чтобы первая строка не выделялась? У меня там заголовок :)) |
Цитата:
var tableStr = $('.mTable tr:not(:eq(1))');
Цитата:
$(document).ready(function() {
var tableStr = $('.mTable tr');
tableStr.mouseover(function(){
$(this).find('td').css({'background-color': '#FFFFFF'});
});
tableStr.mouseout(function(){
$(this).find('td').css({'background-color': ''});;
});
});
|
Ок.
Вот этот код не дает выделить только первую строку первой таблицы, а у меня их три на странице..
debugger;
$(document).ready(function() {
var tableStr = $('.mTable tr:not(:eq(1))');
tableStr.mouseover(function(){
$(this).addClass('svet');
$(this).css("cursor","pointer");
});
tableStr.mouseout(function(){
$(this).removeClass('svet');
$(this).css("cursor","hand");
});
});
как сделать чтобы у каждой таблицы первую строку не выделяло? п.с. последний вопрос для гуру)), подскажите, мне нужно номер строки ловить для каждой таблицы где кликнули - чтобы потом открыть соответствующую запись этой строке в новом окне ,инфу достаю из БД, как такое лучше реализовать? Вызываться по клику php файл должен, который там уже в шаблон все подставит. |
Цитата:
|
ок.
но я по другому строку ловлю, исключая хедер и первую строку -
tableStr.click(function() {
if(this.rowIndex+1 >= 3)
{
alert(this.rowIndex+1);
alert(this.nodeName);
}
});
Так вот.. у меня три таблицы, классы у них одинаковые, единственное только в теге <th> разные названия, в тэйбл хедере то-есть, я смотрю справочник функций, и никак не могу найти, как мне взять тэйбл хедер элемент чтобы проверить оттуда текст - дабы узнать на какой таблице клик произошел.. Подскажите как быть.. как таблицу определить.. |
divine108, при клике на строку будет номер таблицы и номер строки... плюс 1 строка исключена из hover
$(document).ready(function() {
var table = $('.mTable');
table.each(function(index) {
var table_index = index;
var tableStr = $(this).find('tr');
tableStr.each(function(index) {
$(this).click (function () {alert([table_index,index])});
})
tableStr = $(this).find('tr:not(:eq(1))');
tableStr.mouseover(function(){
$(this).addClass('svet');
});
tableStr.mouseout(function(){
$(this).removeClass('svet');
});
});
});
|
Ого! Исчерпывающе! Спасибо большое!
|
Добрый всем вечер!
Возникла такой вопрос, как можно реализовать проверку наличия текста в строке? У меня получается клик и фокус ловятся для каждой строки, но там где в шаблон пхп не подставил текст, то-есть нет больше записей нужно чтобы не фокус не клик не срабатывали.. Используется все тот же код что выше. Помогите пожалуйста этот вопрос решить. И еще вопрос попутно, при фокусе над строкой если указатель находится над текстом - то он принимает форму каретки, хотя клик работает исправно, как сделать чтобы он всегда был одного вида?
debugger;
$(document).ready(function() {
var table = $('.rTable');
var tableStr = table.find('tr');
tableStr.each(function(index) {
$(this).click (function () {alert(index)
window.location.href = "http://mysite.loc/details.php?T=" + "3" + "&R=" + index;
});
tableStr = $(this).find('tr:not(:eq(1))');
tableStr.mouseover(function(){
$(this).addClass('svet');
$(this).css("cursor","hand");
});
tableStr.mouseout(function(){
$(this).removeClass('svet');
$(this).css("cursor","hand");
});
});
});
|
| Часовой пояс GMT +3, время: 22:41. |