Databases
StackOverflow2013
Postsdbo
POhighlight rows and columns within two tables in a div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhighlight rows and columns within two tables in a div
    text
    copied!<p>I have 2 tables in a div and I would like to highlight the same row on both tables at the same time. Right now I only managed to get it to highlight columns and rows in 1 table.</p> <p>(example: If i hover over "Row2 Column3" in <code>tbl-2</code>, Row2 in <code>tbl-1</code> should be highlighted and viceversa)</p> <p>Also how do i get it to highlight the <code>th</code> tag too?</p> <pre><code>&lt;div class="row"&gt; &lt;div class="span2 pull-left"&gt; &lt;table class="table table-bordered pull-left" id="compare-tbl-1"&gt; &lt;thead&gt; &lt;th&gt;Column 1&lt;/th&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt; Row1 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Row2 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Row3 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Row4 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Row5 &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="span10 pull-right"&gt; &lt;table class="table table-bordered" id="compare-tbl-2"&gt; &lt;thead&gt; &lt;th&gt;Column 1&lt;/th&gt;&lt;th&gt;Column 2&lt;/th&gt;&lt;th&gt;Column 3&lt;/th&gt;&lt;th&gt;Column 4&lt;/th&gt;&lt;th&gt;Column 5&lt;/th&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Row1 Column1&lt;/td&gt;&lt;td&gt;Row1 Column2&lt;/td&gt;&lt;td&gt;Row1 Column3&lt;/td&gt;&lt;td&gt;Row1 Column4&lt;/td&gt;&lt;td&gt;Row1 Column5&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Row2 Column1&lt;/td&gt;&lt;td&gt;Row2 Column2&lt;/td&gt;&lt;td&gt;Row2 Column3&lt;/td&gt; &lt;td&gt;Row2 Column4&lt;/td&gt;&lt;td&gt;Row2 Column5&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Row3 Column1&lt;/td&gt;&lt;td&gt;Row3 Column2&lt;/td&gt;&lt;td&gt;Row3 Column3&lt;/td&gt;&lt;td&gt;Row3 Column4&lt;/td&gt;&lt;td&gt;Row3 Column5&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Row4 Column1&lt;/td&gt;&lt;td&gt;Row4 Column2&lt;/td&gt;&lt;td&gt;Row4 Column3&lt;/td&gt;&lt;td&gt;Row4 Column4&lt;/td&gt;&lt;td&gt;Row4 Column5&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Row5 Column1&lt;/td&gt;&lt;td&gt;Row5 Column2&lt;/td&gt;&lt;td&gt;Row5 Column3&lt;/td&gt;&lt;td&gt;Row5 Column4&lt;/td&gt;&lt;td&gt;Row5 Column5&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p></p> <pre><code>&lt;script&gt; $("#compare-tbl-2 td").hover(function() { $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). add($(this).parent()).addClass('compare-hover'); }, function() { $(this).parents('table').find('td:nth-child(' + ($(this).index() + 1) + ')'). add($(this).parent()).removeClass('compare-hover'); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload