Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсветка строки динамической таблицы (https://javascript.ru/forum/dom-window/18052-podsvetka-stroki-dinamicheskojj-tablicy.html)

mgramin 15.06.2011 11:26

Подсветка строки динамической таблицы
 
Доброго всем времени суток. Я знаю что обсуждений в тему данного поста на форумах очень много, но решения, на возникшую у меня проблему, я так и не нашел. Вот в чем она заключается: Есть динамически генерируемая таблица, вида:
Код:

<table  border=0 cellspacing=1 cellpadding=2>
<tr><td>Контент</td></tr>

к генерации которой я не имею доступа, соответственно я не могу прописать никакого id таблице, события onmouseover и т д. Также я не могу подключать никакие CSS, но зато есть возможность подключения JavaScript ну или Jquery. Я пробовал заменить
Код:

table  border=0 cellspacing=1 cellpadding=2
на
Код:

table  border=0 cellspacing=1 cellpadding=2 id = test
а затем подcвечивать строки таблицы по наведению мыши. Но у меня ничего не вышло, подскажите пож-та решения данной проблемы. Заранее спасибо.

melky 15.06.2011 12:51

Цитата:

Сообщение от mgramin (Сообщение 108771)
к генерации которой я не имею доступа, соответственно я не могу прописать никакого id таблице, события onmouseover и т д. Также я не могу подключать никакие CSS, но зато есть возможность подключения JavaScript ну или Jquery.

если имеете возможность подключить скрипты, то вы сразу всем этим овладеваете.

..

по делу

лучше это делать через CSS.

как? живой пример


<table   border=0 cellspacing=1 cellpadding=2><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr></table>



<script>
;var S =((function(){

        var a = document.getElementsByTagName('style');

        return a.length ?  a[0]:
        document.getElementsByTagName('head')[0].appendChild( document.createElement("style") );


})());

S = S.sheet ? S.sheet : S.styleSheet;

var R = S.rules ? 'rules':'cssRules';

function add(selector,rule) {

                 S.addRule ? S.addRule( selector, rule,S[R].length ):S.insertRule( selector+"{"+rule+"}",S[R].length )

}

add("table", "background-color:red;");


add("tr:hover td", "background-color:green;");

</script>

mgramin 15.06.2011 13:37

Сведения об ошибке на веб-странице
Сообщение: 'sheet' - есть null или не является объектом
------------------------------------
Вот такую ошибку выдает IE при вставке выше приведенного кода в генерируемую таблицу. Проблема еще в том, что все пользователи сидят в IE6 и выше, поэтому получается вот такая белиберда. Есть возможность нужную таблицу добавить в свою форму, как-то так

<form>
<table   border=0 cellspacing=1 cellpadding=2>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>
</form>

Я так понимаю, что надо таблице прописать ID и по нему уже делать все что захочу, также есть усложняющий фактор который заключается в том, что таких "безликих" таблиц на странице может быть очень много.
Также с CSS проблемы: при генерации страницы тянется своя CSS, которая инклудится в HTML следующим образом:
<td align=center  style="background-color:red">

melky 15.06.2011 13:43

щас проверю в IE

должно работать.

проверьте сейчас. с момента написания поста я 3 раза его поправлял

Skipp 15.06.2011 13:49

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

mgramin 15.06.2011 13:50

Попробывал, все тоже самое

mgramin 15.06.2011 13:52

А если задать цвет ячейки то получиться следующее:
<table   border=0 cellspacing=1 cellpadding=2><tr><td align=center  style="background-color:green">content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr></table>
<script>
;var S =((function(){

        var a = document.getElementsByTagName('style');

        return a.length ?  a[0]:
        document.getElementsByTagName('head')[0].appendChild( document.createElement("style") );


})()).sheet;

//  предпочтение IE API.
// строка,потому что баг. вместо ссылки rules будет являться копией объекта.
var R = S.rules ? 'rules':'cssRules';

//и тут тоже. заметьте, как надо подавать правила

var selector = "tr:hover td",
rule= "background-color:red;"

// addRule возвратит -1, insertRule - индекс вставленного правила. полезно для последующего стирания стилей,которые добавлял

S.addRule ? S.addRule( selector, rule,S[R].length ):S.insertRule( selector+"{"+rule+"}",S[R].length )
</script>

melky 15.06.2011 13:53

я забыл про это. запас IE API в хроме кончился)

S = S.sheet ? S.sheet : S.styleSheet;


в очередной раз поправил пост.

теперь ошибок нет!

а теперь он не поддерживает :hover :D

mgramin 15.06.2011 13:58

Цитата:

можете привести полный код страницы, а не огрызки?
Просто нужно зацепиться за что нибудь и всё.
Полный код страницы очень большой, да и он постоянно динамически меняться, неизменной остается генерация таблицы, и то что я могу написать перед <table> и после </table>

Skipp 15.06.2011 14:00

Вы тут такой жуткой фигнёй страдаете....:)
Не проще:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$('table tr').bind('mouseenter', function(){
 $(this).css('backgroundColor', 'red');
}).bind('mouseleave', function(){
 $(this).css('backgroundColor', 'transparent');
});
});
</script>
<table   border=0 cellspacing=1 cellpadding=2><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr></table>


Часовой пояс GMT +3, время: 11:01.