StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've implemented this in a <a href="http://jsfiddle.net/nrabinowitz/sPP9z/3/" rel="nofollow">fully functional example here</a>. </p> <p>I cleaned up your code a little bit, but it's basically the same. The main addition is that I wrapped the inputs in a <code>fieldset</code> element (you could use a <code>div</code> just as well, but <code>fieldset</code> is the semantically correct element for grouping related input fields). Your 4-input section lives in one <code>fieldset</code>, and your 2-input section lives in another; the "Add Person" handler looks for the parent <code>fieldset</code>, clones the first child, and adds it into that fieldset. Conveniently, in your use case the defaults for the first <code>fieldset</code> are the same as those for the second <code>fieldset</code>, but it would be easy enough to set up multiple sets of defaults and pass them into the <code>setDefaults</code> function.</p> <p>A few other changes to the code:</p> <ul> <li><p>I split your <code>setDefaults</code> function into two different functions, <code>setDefaults</code> and <code>removeDefaults</code> - you weren't gaining anything by making them a single function, and splitting them makes the code more legible.</p></li> <li><p>I used <code>.delegate</code> to assign the "Remove" handler - otherwise the "Remove" button wouldn't work for new input sets. I also created the "Remove" button with jQuery, rather than cloning it, because I assumed that it wouldn't make sense to include it for the first input set.</p></li> <li><p>I used jQuery in a couple of places where you were using raw Javascript (e.g. getting and setting input values). I generally assume that jQuery is more reliable for cross-browser DOM access and manipulation, so if you're loading the library already there's rarely any point <em>not</em> using it for all but the simplest DOM functions.</p></li> <li><p>I removed your <code>.data</code> calls, since you can get the same information by inspecting the class, and it's generally better to reduce complexity. It's possible that <code>.hasClass('test')</code> is slightly slower than <code>.data('test')</code>, but I don't think it should make any difference here.</p></li> </ul>

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