How do I interact with elements that are created dynamically?
I have a setup like so on a webpage:
Clicking on Add Filter
adds a new entry and Remove
will remove the line next to it.
The code for a single line is as follows:
<tr>
<td><select id="Column1">
<option value="0"></option>
<option value="1">Value a</optio开发者_JAVA百科n>
<option value="2">Value b</option>
</select></td>
<td><select id="Condition1">
<option value="0"></option>
<option value="1">IS EQUAL TO</option>
<option value="2">IS NOT EQUAL TO</option>
<option value="3">IS LIKE</option>
<option value="4">IS NOT LIKE</option>
<option value="5">IS LESS THAN</option>
<option value="6">IS LESS THAN OR EQUAL TO</option>
<option value="7">IS GREATER THAN</option>
<option value="8">IS GREATER THAN OR EQUAL TO</option>
</select></td>
<td><input type="text" id="Values1" /></td>
<td><input type="radio" name="AndOr1" id="And1" value="1">AND</input>
<input type="radio" name="AndOr1" id="Or1" value="2">OR</input>
<span class="RemoveFilter">Remove</span></td>
</tr>
When the line is duplicated the numbers in the IDs increment by one. The whole table has an ID of Filters
so what I would like to know is how do I loop through the tr
lines so that I can grab the values/parameters and send them back to the server? There could potentially be an infinite number of filters selected by the user. (Although this is not needed in this context)
For example to have an array of all the selected values for Column you can write:
var columns = new Array();
$("select[id^='Column']").each(function(index) {
columns[index] = $(this).val();
});
From jQuery Documentation:
jQuery('[attribute^=value]')attributeStartsWith selector selects elements that have the specified attribute with a value beginning exactly with a given string.
instead of incrementing numbers in IDs you can use array name for your inputs and selects:
ie:
<input type="text" name="Values[]" />
If you alter the ID values to be something like "And_1" and "Or_1" (notice the underscore), then you can get away with a JQuery selector like this:
var fields = $("input[id$=_" + id + "]");
It will select all of the inputs with that "row id".
精彩评论