ФорумПрограммированиеJavaScript → Выделение таблицы.

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

  • Professor

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

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

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

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

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

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

    Spritz 5 декабря 2008 г. 5:52, спустя 1 минуту 54 секунды

    в сторону css

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


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

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

    Spritz 5 декабря 2008 г. 5:53, спустя 52 секунды

    ps. че у нас
     не пашет?
    vasa_c, у?
    все умрут, а я изумруд
  • md5

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

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

    а вот столбец… тут только с js
    все умрут, а я изумруд
  • md5

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

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

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

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

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

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

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

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

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

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

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

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

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

    Spritz 5 декабря 2008 г. 12: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

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

    Spritz 5 декабря 2008 г. 13: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

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

    Spritz 5 декабря 2008 г. 13: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 Группа: Адекваты

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

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

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

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

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

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

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

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


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

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

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

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


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

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