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".