Подсветка строки динамической таблицы
Доброго всем времени суток. Я знаю что обсуждений в тему данного поста на форумах очень много, но решения, на возникшую у меня проблему, я так и не нашел. Вот в чем она заключается: Есть динамически генерируемая таблица, вида:
Код:
<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, время: 19:41. |