如何与动态创建的元素进行交互？

Question

我在网页上有这样的设置：

点击Add Filter会添加一个新条目，Remove会删除旁边的行。

单行代码如下：

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

当行重复时，ID中的数字会递增1。整个表的ID为Filters所以我想知道的是如何遍历tr行以便我可以获取值/参数并将它们发送回服务器？用户可能会选择无限数量的过滤器。 （虽然在这种情况下不需要这样做）

Answer 1

例如，要为Column创建一个包含所有选定值的数组，您可以编写：

var columns = new Array();
$("select[id^='Column']").each(function(index) {
    columns[index] = $(this).val();
});

来自 jQuery Documentation：

jQuery('[attribute^=value]')

attributeStartsWith选择器选择具有指定属性的元素，其值始于给定字符串。

Answer 2

而不是递增ID中的数字，您可以使用输入的数组名称并选择：

即：

<input type="text" name="Values[]" />

Answer 3

如果您将ID值更改为“And_1”和“Or_1”（请注意下划线），那么您可以使用这样的JQuery选择器：

var fields = $("input[id$=_" + id + "]");

它将选择具有“行ID”的所有输入。