title: How to get the value of colspan
body: <p>I have tried different jQuery approaches:</p>
  
  <pre><code>var num = $(this).attr('colspan').text();
  var num = $(this).attr('colspan').val();
  var num = $(this).('td[colspan]').val();
  var num = $(this).('td[colspan]').text();
  var num = $(this).('td[colspan]').attr('id');
  </code></pre>
  
  <p>and this from W3Schools: <code>var num = document.getElementById($(this)).colSpan;</code></p>
  
  <p>no luck. It's either undefined or an uncaught TypeError in my <code>console.log()</code></p>
  
  <hr>
  
  <p>EDIT:
  I have tried your suggestions and it still isn't working. Here is part of the code in context:</p>
  
  <pre><code>$('table td').on('mouseenter mouseleave', function(e){
      var th, index, id, td;
      if(e.type === 'mouseenter'){
          id = $(this).attr('id');
          td = $(this);
          var num = $(this).attr('colspan');
          console.log("td = "+td+" colspan = "+num);
          td.addClass('highlight');
  
  var $table_body_scroll=$('table.body_scroll'),
              header_table=$( '&lt;table aria-hidden="true" class="header_table"&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;/table&gt;' ),
              scroll_div='&lt;div class="body_scroll"&gt;&lt;/div&gt;';
          var $targetHeaderTable=$("table.header_table").eq(index);
  
          $('thead tr th').each(function() {
              console.log("th = "+$(this).text());
              console.log("id = "+id);
              if ($(this).text() == id)
              {
                  var num = td.attr('colspan');
                  //console.log("td = "+td+" colspan = "+num);
                  $(this).addClass('highlight');
              }
          });
  
          index = $('td').index($(e.target));
          $(e.target).prevAll().addClass('highlight');
  
      }else{
          $('.highlight').removeClass('highlight');
      }
  });
  </code></pre>
  
  <p>and my console log: <code>td = [object Object] colspan = undefined</code></p>