StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This may or may not be helpful, but here goes:</p> <p>If you are using PHP, rather than suffixing the field names with a number, you might want to try naming them like "fieldname[]" and don't give an ID. So you would have markup like this:</p> <pre><code><input type="text" name="Item_Name[]" /> </code></pre> <p>Then when you are checking the values on POST (another assumption I'm making), PHP will automatically create an array for that POST value, which you can access like so:</p> <pre><code><?php $ItemNames = $_POST['Item_Name']; foreach($ItemNames as $index => $value) { //values are ordered by the order they appeared in the DOM //each value in this array will be a value from an input that had name="Item_Name[]" } ?> </code></pre> <p>OR</p> <p>If you're not using PHP, what you're doing would work fine. Just do the same thing for name that you're doing for id.</p> <p>However, I would note that if you allow deleting of rows, in addition to incrementing based on the rowcount, you might want to make sure that an element with that given ID doesn't already exist. Otherwise you could have a situation where you have two rows with fields suffixed with "1" & "2", delete the first row and then add a new one, and then you'd have two rows with fields suffixed with "2".</p> <p>Your code, with the name attribute set, and the id checked:</p> <pre><code>jQuery.noConflict(); jQuery(document).ready(function($) { var i = $("table#table-id tbody tr").length; $("button#more-rows").click(function() { var clonedRow = $("table#table-id tbody tr:first").clone(); i++; $("*[name*='1']", clonedRow).attr('id', function() { var attrval = $(this).attr("id"); attrval = attrval.replace(/\d/g, ""); while($('#' + attrval + i).size() > 0) { i++; } return attrval + i; }).attr('name', function() { var attrval = $(this).attr("name"); attrval = attrval.replace(/\d/g, ""); return attrval + i; }); $("table#table-id").append(clonedRow); }); }); </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