Форум

qwe88 · #1 (**permalink**) 26.06.2015, 10:44

Добрый день!
Помогите, пожалуйста, разобраться.
Нужно сделать так, что бы подсвечивались столбцы от положения курсора. Почему получилось только у первой строки (при наведении на ячейки в первой строке, подсвечивается столбец, а в остальных ячейках других строк не работает).

<table id="tabstoid" class="tabstodir">
  <tr class="zelstdi">
    <td>&nbsp;</td>
    <td>от 1000</td>
    <td>от  3000</td>
    <td>от  5000</td>
    <td>от  10000</td>
  </tr>
  <tr>
    <td>E<span class="zelcifdi">65</span></td>
    <td>1,60</td>
    <td>1,40</td>
    <td>1,20</td>
    <td>1,00</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">6</span></td>
    <td>1,45</td>
    <td>1,25</td>
    <td>1,05</td>
    <td>0,85</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">65</span></td>
    <td>1,70</td>
    <td>1,50</td>
    <td>1,30</td>
    <td>1,10</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">5</span></td>
    <td>1,75</td>
    <td>1,55</td>
    <td>1,35</td>
    <td>1,15</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">4</span></td>
    <td>2,60</td>
    <td>2,40</td>
    <td>2,20</td>
    <td>2,00</td>
  </tr>
</table>

<script>

var tabastdire = document.getElementById("tabstoid").getElementsByTagName("td");
var tabastrire = document.getElementById("tabstoid").getElementsByTagName("tr");

for(i=0; i<=tabastdire.length; i++){
    function hovtd(i){
        tabastdire[i].onmouseover = function() {
            this.style.backgroundColor = "#CBFFDD";
            for(n=1; n<=tabastrire.length; n++){
                tabastrire[n].getElementsByTagName("td")[i].style.backgroundColor = "#000";
            }
        };

        tabastdire[i].onmouseout = function() {
            this.removeAttribute("style");
        };
    }

    hovtd(i);
}

</script>

devote · #2 (**permalink**) 26.06.2015, 11:13

начните уже пользоваться поиском по форуму перед созданием темы Как выделить столбец в таблице, при наведении курсора на ячейку?

qwe88 · #3 (**permalink**) 26.06.2015, 11:17

Спасибо)
Только хотелось бы без Jquery и самому написать. Почти все получилось, только возникла загвоздка

рони · #4 (**permalink**) 26.06.2015, 11:20

Сообщение от qwe88

от положения курсора

весь столбец ? или до курсора или после курсора?

qwe88 · #5 (**permalink**) 26.06.2015, 11:21

Весь

рони · #6 (**permalink**) 26.06.2015, 11:25

Сообщение от qwe88

i<=tabastdire.length

зачем здесь знак = ?

qwe88 · #7 (**permalink**) 26.06.2015, 11:26

Кто-то так делал, и я стал так делать)

рони · #8 (**permalink**) 26.06.2015, 11:48

qwe88,
нет у вас элементов == length потому что индексы с нуля.
очередной вариант подсветки столбца таблицы

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table id="tabstoid" class="tabstodir">
  <tr class="zelstdi">
    <td>&nbsp;</td>
    <td>от 1000</td>
    <td>от  3000</td>
    <td>от  5000</td>
    <td>от  10000</td>
  </tr>
  <tr>
    <td>E<span class="zelcifdi">65</span></td>
    <td>1,60</td>
    <td>1,40</td>
    <td>1,20</td>
    <td>1,00</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">6</span></td>
    <td>1,45</td>
    <td>1,25</td>
    <td>1,05</td>
    <td>0,85</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">65</span></td>
    <td>1,70</td>
    <td>1,50</td>
    <td>1,30</td>
    <td>1,10</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">5</span></td>
    <td>1,75</td>
    <td>1,55</td>
    <td>1,35</td>
    <td>1,15</td>
  </tr>
  <tr>
	  <td>C<span class="zelcifdi">4</span></td>
    <td>2,60</td>
    <td>2,40</td>
    <td>2,20</td>
    <td>2,00</td>
  </tr>
</table>

<script>
var tabastdire = document.getElementById("tabstoid").getElementsByTagName("td");
arr = [];
[].forEach.call(tabastdire, function(cell, i) {
    var k = cell.cellIndex;
    arr[k] ? arr[k].push(cell) : (arr[k] = [cell]);
    cell.onmouseover = function() {
        arr[k].forEach(function(el) {
            el.style.backgroundColor = "#CBFFDD"
        })
        this.style.backgroundColor = "#00CC47"

    }
    cell.onmouseout = function() {
        arr[k].forEach(function(el) {
            el.style.backgroundColor = ""
        })
    }
})</script>

</body>

</html>

qwe88 · #9 (**permalink**) 26.06.2015, 11:54

Супер!)
Спасибо огромное)
Сейчас буду разбираться, как вы это сделали)

Форум

Справочник

Discord чат

Курсы javascript