Question

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</option>
    <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)

Answer 1

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.