Таблица на JS, как подсветить столбец?

384

24 сентября 2017, 01:03

Есть табличка, нужно при наведении курсора, чтобы подсвечивало столбец и строку. Со строкой получилось, помогите, пожалуйста, подсветить и столбец.

function maketable(){
let string = "<table>";
  for (let i = 1; i <= 9; i++) {
    string += "<tr>";
          for (let j = 1; j <= 9; j++) {
              let res = i * j;
                  string += "<td>" + res + " </td>" ;
              }
  string += "</tr>";
  } 
  string  +="</table>";
  document.write(string);
}
maketable();
let tab = document.getElementsByTagName('TABLE');
console.log(tab);
this.addEventListener('mouseover', function(e){
  if (e.target.tagName === 'TD') {
    e.target.parentElement.style.backgroundColor = 'red'
  }
})
this.addEventListener('mouseout', function(e){
        if (e.target.tagName === 'TD') {
    e.target.parentElement.style.backgroundColor = 'white'
  }
    })

Answer 1

Использование JS, как показывает этот пример, необязательно. Взято с оригинального ресурса отсюда:

table { 
  overflow: hidden; 
} 
 
td, th { 
  padding: 10px; 
  position: relative; 
  outline: 0; 
} 
 
body:not(.nohover) tbody tr:hover { 
  background-color: #ffa; 
} 
 
td:hover::after, 
thead th:not(:empty):hover::after, 
td:focus::after, 
thead th:not(:empty):focus::after {  
  content: '';   
  height: 10000px; 
  left: 0; 
  position: absolute;   
  top: -5000px; 
  width: 100%; 
  z-index: -1; 
} 
 
td:hover::after, 
th:hover::after { 
  background-color: #ffa; 
} 
 
td:focus::after, 
th:focus::after { 
  background-color: lightblue; 
} 
 
/* Focus stuff for mobile */ 
td:focus::before, 
tbody th:focus::before { 
  background-color: lightblue; 
  content: '';   
  height: 100%; 
  top: 0; 
  left: -5000px; 
  position: absolute;   
  width: 10000px; 
  z-index: -1; 
}

<main> 
  <table> 
    <thead> 
      <tr> 
        <th></th> 
        <th class="col">50kg</th> 
        <th class="col">55kg</th> 
        <th class="col">60kg</th> 
        <th class="col">65kg</th> 
        <th class="col">70kg</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <th class="row">160cm</th> 
        <td>20</td> 
        <td>21</td> 
        <td>23</td> 
        <td>25</td> 
        <td>27</td> 
      </tr> 
 
      <tr> 
        <th class="row">165cm</th> 
        <td>18</td> 
        <td>20</td> 
        <td>22</td> 
        <td>24</td> 
        <td>26</td> 
      </tr> 
 
      <tr> 
        <th class="row">170cm</th> 
        <td>17</td> 
        <td>19</td> 
        <td>21</td> 
        <td>23</td> 
        <td>25</td> 
      </tr> 
 
      <tr> 
        <th class="row">175cm</th> 
        <td>16</td> 
        <td>18</td> 
        <td>20</td> 
        <td>22</td> 
        <td>24</td> 
      </tr> 
    <tbody> 
  </table> 
</main>

Answer 2

Рефакторинг. Просто нужно ассоциировать все столбы с css стилем и/или классом.

let myClasses = document.getElementsByTagName('TD');
Array.prototype.foreach.call(myClasses, function(myClasses) {
  myClasses.addEventListener('mouseover', function(event) {
    event.target.style.backgorund = "black";
  })
  myClasses.addEventListener('mouseleave', function(event) {
    event.target.style.backgorund = '';
  })
})

или же если присвоить класс;

let myClasses = document.getElementsByTagName('TD');
Array.prototype.foreach.call(myClasses, function(myClasses) {
  myClasses.addEventListener('mouseover', function(event) {
    event.target.className = "black";
  })
  myClasses.addEventListener('mouseleave', function(event) {
    event.target.className = 'white';
  })
})

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Webpack ошибка, Как исправить?

Решил подучить webpack есть файл выноса стилей из js

294

javascript

Как преобразовать массив со строкой в массив с числом?

Есть переменная (строка) с координатами var coor = "53721923,91

372

javascript

Что выполняет данный код?

Код был найден инспектором Chrome'а; инспектор помечает его, как код, который меняет стиль кнопки на "невидимый", а также меняет стиль (dropdown)

465

javascript

По какой причине GET запрос axios.js отдает Network Error?

Отправляю с локального компьютера с помощью axiosjs GET запрос на localhost:3000 - где располагается rails-приложение, отдающее JSON - и получаю ошибку Network...

402