Databases
StackOverflow2013
Postsdbo
POjQuery - How to show and hide labels and inputs in multiple rows in a table
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - How to show and hide labels and inputs in multiple rows in a table
    text
    copied!<p>I have a table that looks like this:</p> <pre><code>&lt;table id="tblBranchCoverage" class="hideOnLoad" width="100%"&gt; &lt;tr class="coverageRow" style="cursor: pointer;"&gt; &lt;td class="countyCovered" width="115px"&gt; &lt;label class="branchCountyCovered coverageDisplay"&gt;Douglas&lt;/label&gt; &lt;input type="text" class="edit editBox editCounty" style="display: none; width: 111px;" value="Douglas"&gt;&lt;br&gt; &lt;input type="submit" class="button edit submitCoverageEdits" style="display: none;" value="Save Changes"&gt;&lt;br&gt; &lt;input type="submit" class="button edit cancelCoverageEdits" style="display: none;" value="Cancel"&gt; &lt;/td&gt; &lt;td class="stateCovered" width="30px"&gt; &lt;label class="branchStateCovered coverageDisplay"&gt;GA&lt;/label&gt; &lt;input type="text" class="edit editBox editState" style="display: none; width: 22px;" value="GA" max-length="2"&gt; &lt;/td&gt; &lt;td class="zipsCovered"&gt; &lt;label class="branchZipsCovered coverageDisplay"&gt;30122, 30133, 30134, 30135, 30154, 30187&lt;/label&gt; &lt;textarea class="edit editBox editZips" style="display: none;" cols="100"&gt;30122, 30133, 30134, 30135, 30154, 30187&lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="coverageRow"&gt; &lt;td class="countyCovered" width="115px"&gt; &lt;label class="branchCountyCovered coverageDisplay"&gt;Forsyth&lt;/label&gt; &lt;input type="text" class="edit editBox editCounty" style="display: none; width: 111px;" value="Forsyth"&gt;&lt;br&gt; &lt;input type="submit" class="button edit submitCoverageEdits" style="display: none;" value="Save Changes"&gt;&lt;br&gt; &lt;input type="submit" class="button edit cancelCoverageEdits" style="display: none;" value="Cancel"&gt; &lt;/td&gt; &lt;td class="stateCovered" width="30px"&gt; &lt;label class="branchStateCovered coverageDisplay"&gt;GA&lt;/label&gt; &lt;input type="text" class="edit editBox editState" style="display: none; width: 22px;" value="GA" max-length="2"&gt; &lt;/td&gt; &lt;td class="zipsCovered"&gt; &lt;label class="branchZipsCovered coverageDisplay"&gt;30028, 30040, 30041&lt;/label&gt; &lt;textarea class="edit editBox editZips" style="display: none;" cols="100"&gt;30028, 30040, 30041&lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>I need to iterate through the rows of the table, find the row (there will be only one at the most, but it can be that all rows will have the labels displayed and the inputs hidden) that has elements with class "edit" that are set to "display: none". When that row is found, I need to hide the .edit elements and show the labels (which at that time will have the style "display: none" set).</p> <p>I'm doing this within this context:</p> <pre><code>$('#tblBranchCoverage').on('click', 'tr', function() { </code></pre> <p>So, basically, when the user clicks on a row all other rows in the table will have the .edit elements hidden and the labels shown and in the clicked row edit elements should display and the labels get hidden.</p> <p>The closest I've gotten to it working is this:</p> <pre><code> $(this).parent().find('tr td').each(function() { $(this).find('.edit').hide(); $(this).find('.coverageDisplay [style*="display: none"]').show(); }); $(this).find('.coverageDisplay').fadeOut(200); $(this).find('.edit').delay(200).fadeIn(200); }); </code></pre> <p>Which isn't really "close" at all, since the row that is clicked on gets all of its elements hidden.</p> <p>I've been messing with this for two hours. I'd really love some help!</p> <p>Thanks.</p> <p><strong>[Edit]</strong> As requested, here's a <a href="http://jsfiddle.net/eventide/KZhhH/" rel="nofollow">jsFiddle</a>.</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