Databases
StackOverflow2013
Postsdbo
POjQuery Plugin select thead with "this" element
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Plugin select thead with "this" element
    text
    copied!<p>If I had two html tables like so:</p> <pre><code>&lt;table id="myTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;Age&lt;/th&gt; &lt;th&gt;Total&lt;/th&gt; &lt;th&gt;Discount&lt;/th&gt; &lt;th&gt;Difference&lt;/th&gt; &lt;th&gt;Date&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Peter&lt;/td&gt; &lt;td&gt;Parker&lt;/td&gt; &lt;td&gt;28&lt;/td&gt; &lt;td&gt;$9.99&lt;/td&gt; &lt;td&gt;20.9%&lt;/td&gt; &lt;td&gt;+12.1&lt;/td&gt; &lt;td&gt;Jul 6, 2006 8:14 AM&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;John&lt;/td&gt; &lt;td&gt;Hood&lt;/td&gt; &lt;td&gt;33&lt;/td&gt; &lt;td&gt;$19.99&lt;/td&gt; &lt;td&gt;25%&lt;/td&gt; &lt;td&gt;+12&lt;/td&gt; &lt;td&gt;Dec 10, 2002 5:14 AM&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;br/&gt;&lt;br/&gt; &lt;table id="anotherTable"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;High Score&lt;/th&gt; &lt;th&gt;Total Score&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Clark&lt;/td&gt; &lt;td&gt;Kent&lt;/td&gt; &lt;td&gt;18&lt;/td&gt; &lt;td&gt;32&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Bruce&lt;/td&gt; &lt;td&gt;Almighty&lt;/td&gt; &lt;td&gt;45&lt;/td&gt; &lt;td&gt;180&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>jQuery on my HTML page:</p> <pre><code>$(document).ready(function(){ $("#myTable").myplugin(); }); </code></pre> <p>I am creating a jQuery plugin which I want to be able to apply to any or all HTML tables on a page in my application with either $("table").myplugin() or $("#myTable").myplugin().</p> <p>in my plugin code:</p> <pre><code>return this.each(function(index){ // code here }); </code></pre> <p>If I add the line <code>$(this).addClass('myClass')</code> the CSS "myClass" is added to table "myTable" but if I add the line <code>$('thead').addClass()</code> "myClass" is added to both theads. I've tried <code>$(this thead).addClass(), $(this 'thead').addClass(), $('this thead').addClass()</code> but the all throw a JS error. How do I utilize "this" to select only the thead in element "myplugin" is being applied to in this case "myTable"?</p>
 

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