Note that there are some explanatory texts on larger screens.

plurals
  1. POKeeping textboxes hidden and shown in synch
    primarykey
    data
    text
    <p>I've used <a href="https://github.com/jmosbech/StickyTableHeaders/" rel="nofollow">StickyTableHeaders</a> jQuery plugin to have header of my page-wide table stick to the top. I want to add filter box (regular <code>INPUT</code> text tag) into table's <code>TH</code>. The problem is if I enter the text into the inputbox before the header is cloned (to be "sticky"), the clone doesn't have text I enterd. An vice versa. As far as I can tell there's no event triggered when a html element is hidden/un-hidden. How can I keep the text between original header and cloned "sticky" header synchronized? Either by modifying plugin (I don't know jQuery that well), or non-jQuery way.</p> <pre><code>&lt;table id="xxx"&gt; &lt;colgroup&gt; &lt;col span="1" style="width: 100px" /&gt; &lt;col span="1" style="width: 200px" /&gt; &lt;col span="1" /&gt; &lt;/colgroup&gt; &lt;thead&gt; &lt;tr&gt; &lt;th class="bID"&gt;ID&lt;/th&gt; &lt;th class="bStatus"&gt;&lt;span class="statusCol"&gt;Status&lt;/span&gt;&lt;/th&gt; &lt;th class="bSummary"&gt;Summary &lt;input type="text" name="firstname"/&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="can"&gt; &lt;td class="bID"&gt;...&lt;/td&gt; &lt;td class="bStatus"&gt;...&lt;/td&gt; &lt;td class="bSummary"&gt;...&lt;/td&gt; &lt;/tr&gt; </code></pre> <p><strong>EDIT:</strong></p> <p><code>jsfiddle.net/tsLxz</code> thanks! after it loads, enter any text in the text box, then scroll down -- text disappears from the box; scroll back up - appears again. i understand why, but don't know how to synch.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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