Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2011, 10:26
Интересующийся
Отправить личное сообщение для mgramin Посмотреть профиль Найти все сообщения от mgramin
 
Регистрация: 28.11.2010
Сообщений: 24

Подсветка строки динамической таблицы
Доброго всем времени суток. Я знаю что обсуждений в тему данного поста на форумах очень много, но решения, на возникшую у меня проблему, я так и не нашел. Вот в чем она заключается: Есть динамически генерируемая таблица, вида:
Код:
<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вечивать строки таблицы по наведению мыши. Но у меня ничего не вышло, подскажите пож-та решения данной проблемы. Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2011, 11:51
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от mgramin Посмотреть сообщение
к генерации которой я не имею доступа, соответственно я не могу прописать никакого 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>

Последний раз редактировалось melky, 15.06.2011 в 12:57.
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2011, 12:37
Интересующийся
Отправить личное сообщение для mgramin Посмотреть профиль Найти все сообщения от mgramin
 
Регистрация: 28.11.2010
Сообщений: 24

Сведения об ошибке на веб-странице
Сообщение: '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">
Ответить с цитированием
  #4 (permalink)  
Старый 15.06.2011, 12:43
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

проверьте сейчас. с момента написания поста я 3 раза его поправлял
Ответить с цитированием
  #5 (permalink)  
Старый 15.06.2011, 12:49
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,806

можете привести полный код страницы, а не огрызки?
Просто нужно зацепиться за что нибудь и всё.
__________________
.
Ответить с цитированием
  #6 (permalink)  
Старый 15.06.2011, 12:50
Интересующийся
Отправить личное сообщение для mgramin Посмотреть профиль Найти все сообщения от mgramin
 
Регистрация: 28.11.2010
Сообщений: 24

Попробывал, все тоже самое
Ответить с цитированием
  #7 (permalink)  
Старый 15.06.2011, 12:52
Интересующийся
Отправить личное сообщение для mgramin Посмотреть профиль Найти все сообщения от mgramin
 
Регистрация: 28.11.2010
Сообщений: 24

А если задать цвет ячейки то получиться следующее:
<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>
Ответить с цитированием
  #8 (permalink)  
Старый 15.06.2011, 12:53
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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


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

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

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

Последний раз редактировалось melky, 15.06.2011 в 12:59.
Ответить с цитированием
  #9 (permalink)  
Старый 15.06.2011, 12:58
Интересующийся
Отправить личное сообщение для mgramin Посмотреть профиль Найти все сообщения от mgramin
 
Регистрация: 28.11.2010
Сообщений: 24

Цитата:
можете привести полный код страницы, а не огрызки?
Просто нужно зацепиться за что нибудь и всё.
Полный код страницы очень большой, да и он постоянно динамически меняться, неизменной остается генерация таблицы, и то что я могу написать перед <table> и после </table>
Ответить с цитированием
  #10 (permalink)  
Старый 15.06.2011, 13:00
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,806

Вы тут такой жуткой фигнёй страдаете....
Не проще:
<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, 15.06.2011 в 13:58.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсветка столбцов таблицы ctocopok Элементы интерфейса 31 14.06.2011 00:42
Как реализовать скроллинг в Div-е до указанной строки таблицы. Shabol Элементы интерфейса 3 24.09.2010 13:19
Как вложено прятать строки таблицы? Бобр Общие вопросы Javascript 10 01.08.2010 12:57
Подсветка выделенной строки в таблице (row table highlight) artsage Элементы интерфейса 4 03.04.2009 05:40
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 00:28