Подсветка строки динамической таблицы
 

Доброго всем времени суток. Я знаю что обсуждений в тему данного поста на форумах очень много, но решения, на возникшую у меня проблему, я так и не нашел. Вот в чем она заключается: Есть динамически генерируемая таблица, вида:
к генерации которой я не имею доступа, соответственно я не могу прописать никакого id таблице, события onmouseover и т д. Также я не могу подключать никакие CSS, но зато есть возможность подключения JavaScript ну или Jquery. Я пробовал заменить на а затем подcвечивать строки таблицы по наведению мыши. Но у меня ничего не вышло, подскажите пож-та решения данной проблемы. Заранее спасибо.

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

..

по делу

лучше это делать через 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

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

Вы тут такой жуткой фигнёй страдаете....:)
Не проще:

<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>

Ошибок нет, но он также не отработал, под IE 6 и IE 8

Спасибо за простое решение, только Jquery могу подключить максимум 1.2.6

почему????

mgramin,
а что не работает?

У Вас отработал?

Реализация на Jquery ругается что объект не поддерживает свойство или метод, просто версия Jquery старая, а новее загрузить не вар

Теперь работает и в 1.2.6

<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>

Skipp спасибо все заработало, но в генерируемой таблице нет, потому, что на каждую таблицу тянется своя CSS:(

По этому я вам до этого и писал напишите примерно что генерируется, чтоб понять примерный шаблон.

Сгенерированые страницы могут очень сильно отличаться друг от друга, но ко всем тянется CSS, помимо этого к некоторым ячейкам применяются

<td align=center  style="background-color:green">content</td>

и есть возможность перед и после таблицы вставить кусок кода

Всё равно шаблон один. Логику не понимаете.

Я понимаю логику, просто эта страница не является тупой HTML, в ней изначально заложен гигантский JavaScript функционал, который может менять страницу до неузнаваемости, неизменными в ней остаются исключительно таблицы и подключаемые CSS вот пример:

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function(){
$('table tr').bind('mouseenter', function(){
$(this).css('backgroundColor', 'red');
}).bind('mouseleave', function(){
$(this).css('backgroundColor', 'transparent');
});
});
</script>

 <style type="text/css">
td {color:black ; font-family: Arial ; font-size:9pt ; background-color: yellow ; }
</style>
<table   border=0 cellspacing=1 cellpadding=2><tr><td align=center  style="background-color:green">content</td><td align=center>content</td></tr><tr><td>content</td><td>content</td></tr></table>

В итоге после предыдущего поста, у меня возник вопрос как подменить CSS