Table Readability

by Joe Saad

HTML

<h1>Table Readability</h1>

<table>
  <thead>
    <tr>
      <th>header 1</th>
      <th>header 2</th>
      <th>header 3</th>
      <th>header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
    <tr>
      <td>item 1</td>
      <td>item 2</td>
      <td>item 3</td>
      <td>item 4</td>
    </tr>
  </tbody>
</table>

JavaScript

const hello = (m) =>{
	console.log('hello '+m)
}

hello("Joe")


$('td').hover(function(){
  $(this).closest('tr').children('td').css('background','red')
  let col = $(this).index()+1;
  $('td:nth-child('+col+')').css('background','red')
}, function(){
  $(this).closest('tr').children('td').css('background','none')
    let col = $(this).index()+1;
    $('td:nth-child('+col+')').css('background','none')
})