title: How can I find each table cell's "visual location" using jQuery?
body: <p>I have a HTML table that contains both ROWSPANs and COLSPANs.</p>
  
  <p>How can I find each cell's "visual location" using jQuery?</p>
  
  <p>For example, here's a visual representation of my table with each cell populated with what the "visual location" algorithm should return:<br>
  <em>(Note: I only really care about cells within the <code>&lt;tbody&gt;</code> and the column reference can be an integer, not an alphabetic character, I've only done this to easily highlight the problem)</em></p>
  
  <pre><code>+--+--+--+--+--+
  |  |A |B |C |D |
  +--+--+--+--+--+
  |1 |A1|B1   |D1|
  +--+--+--+--+  +
  |2 |A2   |C2|  |
  +--+     +--+  +
  |3 |     |C3|  |
  +--+--+--+--+--+
  |4 |A4|B4|C4|D4|
  +--+--+--+--+--+
  |XYZ           |
  +--+--+--+--+--+
  </code></pre>
  
  <p>I've tried implementing the first, however the reference for cell C3 is inaccurate as it doesn't take into account ROWSPANS. The second link may be able to be merged into the solution of the first, but I can't figure out how.</p>
  
  <ul>
  <li><a href="http://mytechworld.officeacuity.com/index.php/2009/09/working-with-tables-in-jquery/" rel="nofollow noreferrer">Working with tables in jQuery | My Tech World</a></li>
  <li><a href="https://stackoverflow.com/a/1452582">What's the most efficient way to retrieve the column of rows affected by a "rowspan"? - Stack Overflow</a></li>
  </ul>
  
  <p>I'm hoping to use this as a function called <code>getCellLocation(cell)</code> that will return an associative array that returns the location something like this:</p>
  
  <pre><code>function getCellLocation(cell)
  {
    var row_number = parseInt($(cell).parent().prevAll().length) + 1;
    var col_number = 1;
    $(cell).prevAll('td').each(function() {
        col_number += $(this).attr('colspan') ? parseInt($(this).attr('colspan')) : 1;
    });
  
    var location = new Array();
    location['row'] = row_number;
    location['col'] = col_number;
    location['index'] = $('td').index(cell) + 1;
    return location;
  }
  
  $('table td').each(function(i){
    var cell = getCellLocation($(this));
    $(this).prepend('&lt;span class="ref"&gt;R' + cell['row'] + ':C' + cell['col'] + ':D' + cell['index'] + '&lt;/span&gt;');
  });
  </code></pre>
  
  <p>Here's the HTML of the example table:</p>
  
  <pre><code>&lt;table border="1" cellspacing="0"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;A&lt;/th&gt;
        &lt;th&gt;B&lt;/th&gt;
        &lt;th&gt;C&lt;/th&gt;
        &lt;th&gt;D&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th&gt;1&lt;/th&gt;
        &lt;td&gt;A1&lt;/td&gt;
        &lt;td colspan="2"&gt;B1&lt;/td&gt;
        &lt;td rowspan="3"&gt;D1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;2&lt;/th&gt;
        &lt;td rowspan="2" colspan="2"&gt;A2&lt;/td&gt;
        &lt;td&gt;C2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;3&lt;/th&gt;
        &lt;td&gt;C3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;4&lt;/th&gt;
        &lt;td&gt;A4&lt;/td&gt;
        &lt;td&gt;B4&lt;/td&gt;
        &lt;td&gt;C4&lt;/td&gt;
        &lt;td&gt;D4&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
      &lt;tr&gt;
        &lt;td colspan="5"&gt;XYZ&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;
  &lt;style&gt; span { background-color: #ffc; margin-right: .5em;} &lt;/style&gt;
  </code></pre>