开发者

How do I interact with elements that are created dynamically?

I have a setup like so on a webpage:

How do I interact with elements that are created dynamically?

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜