Подсветка строки динамической таблицы
Доброго всем времени суток. Я знаю что обсуждений в тему данного поста на форумах очень много, но решения, на возникшую у меня проблему, я так и не нашел. Вот в чем она заключается: Есть динамически генерируемая таблица, вида:
Код:
<table border=0 cellspacing=1 cellpadding=2> Код:
table border=0 cellspacing=1 cellpadding=2 Код:
table border=0 cellspacing=1 cellpadding=2 id = test |
Цитата:
.. по делу лучше это делать через 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> |
Сведения об ошибке на веб-странице
Сообщение: '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"> |
щас проверю в IE
должно работать. проверьте сейчас. с момента написания поста я 3 раза его поправлял |
можете привести полный код страницы, а не огрызки?
Просто нужно зацепиться за что нибудь и всё. |
Попробывал, все тоже самое
|
А если задать цвет ячейки то получиться следующее:
<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> |
я забыл про это. запас IE API в хроме кончился)
S = S.sheet ? S.sheet : S.styleSheet; в очередной раз поправил пост. теперь ошибок нет! а теперь он не поддерживает :hover :D |
Цитата:
|
Вы тут такой жуткой фигнёй страдаете....:)
Не проще: <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:16. |