Выделение таблицы.

Professor

Сообщения: 2089 Репутация: N Группа: Адекваты

5 декабря 2008 г. 13:50

Чето как то даже тему нормально не смог назвать((

В общем нужно сделать такую вещь.
Есть таблица, при наведении на одну из ячеек курсора, должен весь ряд выделяться и весь столбец.

Есть какие нибудь предложения в какую сторону двигаться??
md5

Сообщения: 11960 Репутация: N Группа: в ухо
5 декабря 2008 г. 13:52, спустя 1 минуту 54 секунды
в сторону css

<tr onmouseover="this.className='tr-over'">

css:
.tr-over td { background:#f00; }
все умрут, а я изумруд
md5

Сообщения: 11960 Репутация: N Группа: в ухо
5 декабря 2008 г. 13:53, спустя 52 секунды
ps. че у нас
не пашет? vasa_c, у?
все умрут, а я изумруд
md5

Сообщения: 11960 Репутация: N Группа: в ухо

5 декабря 2008 г. 13:53, спустя 45 секунд

а вот столбец… тут только с js

все умрут, а я изумруд
md5

Сообщения: 11960 Репутация: N Группа: в ухо

5 декабря 2008 г. 13:54, спустя 55 секунд

наверно надо каждому td присваивать класс с координатами
а при наведении пробегаться по всем и отмечать с совпаденными координатами по Y

все умрут, а я изумруд
AlexB

Сообщения: 4306 Репутация: N Группа: в ухо

5 декабря 2008 г. 13:57, спустя 2 минуты 25 секунд

Двигаться в сторону анализа DOM, разумеется.
А совсем круто, написать behavior, чтоб потом только class для таблицы указывать, а она сама знала как себя вести.
adw0rd

Сообщения: 22959 Репутация: N Группа: в ухо

5 декабря 2008 г. 14:59, спустя 1 час 1 минуту 57 секунд

Professor, а данные то точно табличные, или просто верстка табличная? <lable> можно заюзать

https://smappi.org/ - платформа по созданию API на все случаи жизни
Professor

Сообщения: 2089 Репутация: N Группа: Адекваты

5 декабря 2008 г. 15:25, спустя 26 минут 2 секунды

да, к сожалению данные табличные. =(

Сообщения: 1068 Репутация: N Группа: Джедаи

5 декабря 2008 г. 20:43, спустя 5 часов 18 минут 12 секунд

<style type="text/css">
#tab td{
    border:1px solid #333;
    width:50px;
    height:50px;
    text-align:center;
}
</style>

<table id="tab">
 <tr> <td>00</td> <td>01</td> <td>02</td> <td>03</td> <td>04</td> <td>05</td> </tr>
 <tr> <td>06</td> <td>07</td> <td>08</td> <td>09</td> <td>10</td> <td>11</td> </tr>
 <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> </tr>
 <tr> <td>18</td> <td>19</td> <td>20</td> <td>21</td> <td>22</td> <td>23</td> </tr>
 <tr> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> </tr>
 <tr> <td>30</td> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr>
</table>

<script type="text/javascript">
document.getElementById("tab").onmouseover = function () 
{
    var cells = document.getElementById("tab").getElementsByTagName("td")
    for (var i = 0; i < cells.length; ++i) {
        cells.onmouseover = function ()
        {
            var row = this.parentNode
            var tab = row.parentNode
            var rowCells = row.getElementsByTagName("td")
            var colCount = rowCells.length
            var tabCells = tab.getElementsByTagName("td")
            // Красим колонку
            for (var j = this.cellIndex; j < tabCells.length; j += colCount) {
                tabCells[j].style.background = "#ccc"
            }
            // Красим строку
            for (var j = 0; j < colCount; ++j) {
                rowCells[j].style.background = "#ccc"
            }
        }     
        
        cells.onmouseout = function ()
        {
            // Убираем "покраску"
            var cells = tab.getElementsByTagName("td")
            for (var j = 0; j < cells.length; ++j) {
                cells[j].style.background = "#fff"
            }
        }
    }
}
</script>

phpdude

Сообщения: 26646 Репутация: N Группа: в ухо
5 декабря 2008 г. 21:19, спустя 35 минут 41 секунду
Timur, ты сделал все верно :)

могу только добавить свой вариант :)

http://94.31.169.103/table.html

таблица та же самая. скрипт вот.

$(document).ready(function () { $('#jquerytab').find("td").mouseover(function () { $("#jquerytab tr td:nth-child("+(this.cellIndex+1)+")").addClass("mouse-over"); $(this).parent("tr").children("td").addClass("mouse-over"); }).mouseout(function () { $("#jquerytab tr td:nth-child("+(this.cellIndex+1)+")").removeClass("mouse-over"); $(this).parent("tr").children("td").removeClass("mouse-over"); }); });

ps:// на всеми ненавистном jquery
Сапожник без сапог

phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

5 декабря 2008 г. 21:21, спустя 2 минуты 40 секунд

Timur, ты сделал все верно :)

могу только добавить свой вариант :)

http://94.31.169.103/table.html

таблица та же самая. скрипт вот.
$(document).ready(function () {
	$('#jquerytab').find("td").mouseover(function () {
		$("#jquerytab tr td:nth-child("+(this.cellIndex+1)+")").addClass("mouse-over");
		$(this).parent("tr").children("td").addClass("mouse-over");
	}).mouseout(function () {
		$("#jquerytab tr td:nth-child("+(this.cellIndex+1)+")").removeClass("mouse-over");
		$(this).parent("tr").children("td").removeClass("mouse-over");
	});
});

вот ксс.


<style>
.mouse-over {
	background-color: #dddddd;
}
</style>

Сапожник без сапог

Professor

Сообщения: 2089 Репутация: N Группа: Адекваты

5 декабря 2008 г. 21:32, спустя 10 минут 43 секунды

Ух ты, круто!!! Завтра вклинивать буду!! =)
Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

5 декабря 2008 г. 22:34, спустя 1 час 1 минуту 32 секунды

ps:// на всеми ненавистном jquery

я не ненавижу jQuery, я просто его не знаю )
скорее я ненавижу сам JS, поэтому и вломы вникать в эти фреймворки
phpdude

Сообщения: 26646 Репутация: N Группа: в ухо

5 декабря 2008 г. 22:47, спустя 13 минут 22 секунды

ps:// на всеми ненавистном jquery

я не ненавижу jQuery, я просто его не знаю )
скорее я ненавижу сам JS, поэтому и вломы вникать в эти фреймворки
я ненавидел жс, пока не вник в жукери :) "Write less. Do MORE" (jQuery)

Сапожник без сапог
md5

Сообщения: 11960 Репутация: N Группа: в ухо

5 декабря 2008 г. 22:53, спустя 5 минут 59 секунд

"Write less. Do MORE" (jQuery)
слушай, напиши эту фразу в подпись )) и так через сообщение говоришь :)

все умрут, а я изумруд

Пожалуйста, авторизуйтесь, чтобы написать комментарий!

Выделение таблицы.

Войти