Criteria
This is a really custom component made for the old Segmentation page.
Default
<table class="e-criteria">
<tbody>
<tr>
<td id="standard1" width="50" valign="bottom">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="plus" color="white"></e-icon>
</div>
</td>
<td align="left" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody id="table_0_children">
<tr id="tr_2">
<td class="e-criteria__item" id="td_2">
<table class="table_condition" width="100%">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table class="table_crit" width="100%">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<div class="e-grid e-grid-xsmall">
<div class="e-cell e-cell-xsmall">
<select class="e-select e-select__select2 e-select-large" id="field_1" name="field_1" onchange="ChangeElement(1)">
<option value>
-- select field --
</option>
<option value="10">
Address
</option>
</select>
</div>
<div class="e-cell e-cell-xsmall">
<select class="e-select e-select__select2 e-select-large" id="op_1" name="op_1" onchange="OperatorChanged(1)">
<option value>
N/A
</option>
</select>
</div>
<div class="e-cell e-cell-xsmall">
<span id="crit_1_td">
<input class="e-input e-input-large" id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)">
</span>
</div>
</div>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="tr_2">
<td class="e-criteria__item" id="td_2">
<table class="table_condition" width="100%">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table class="table_crit" width="100%">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<div class="e-grid e-grid-xsmall">
<div class="e-cell e-cell-xsmall">
<select class="e-select e-select__select2 e-select-large" id="field_1" name="field_1" onchange="ChangeElement(1)">
<option value>
-- select field --
</option>
<option value="10">
Address
</option>
</select>
</div>
<div class="e-cell e-cell-xsmall">
<select class="e-select e-select__select2 e-select-large" id="op_1" name="op_1" onchange="OperatorChanged(1)">
<option value>
N/A
</option>
</select>
</div>
<div class="e-cell e-cell-xsmall">
<span id="crit_1_td">
<input class="e-input e-input-large" id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)">
</span>
</div>
</div>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="tr_2">
<td class="e-criteria__item" id="td_2">
<table class="table_condition" width="100%">
<tbody id="table_2">
<tr>
<td id="td_2_right">
<table width="100%">
<tbody id="table_2_children">
<tr id="tr_1">
<td id="td_1">
<table class="table_crit" width="100%">
<tbody id="table_1">
<tr>
<td style="white-space: nowrap;">
<div class="e-grid e-grid-xsmall">
<div class="e-cell e-cell-xsmall">
<select class="e-select e-select__select2 e-select-large" id="field_1" name="field_1" onchange="ChangeElement(1)">
<option value>
-- select field --
</option>
<option value="10">
Address
</option>
</select>
</div>
<div class="e-cell e-cell-xsmall">
<select class="e-select e-select__select2 e-select-large" id="op_1" name="op_1" onchange="OperatorChanged(1)">
<option value>
N/A
</option>
</select>
</div>
<div class="e-cell e-cell-xsmall">
<span id="crit_1_td">
<input class="e-input e-input-large" id="crit_1" name="crit_1" type="text" value onchange="critChanged(1)">
</span>
</div>
</div>
</td>
<td align="right" width="1">
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus" color="white"></e-icon>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="e-criteria"><tbody><tr><td id="standard1" width="50" valign="bottom"><div class="e-btn e-btn-onlyicon e-btn-secondary"><e-icon icon="plus" color="white"></e-icon></div></td><td align="left" valign="top"><table width="100%" cellspacing="0" cellpadding="0" border="0"><tbody id="table_0_children"><tr id="tr_2"><td class="e-criteria__item" id="td_2"><table class="table_condition" width="100%"><tbody id="table_2"><tr><td id="td_2_right"><table width="100%"><tbody id="table_2_children"><tr id="tr_1"><td id="td_1"><table class="table_crit" width="100%"><tbody id="table_1"><tr><td style="white-space: nowrap;"><div class="e-grid e-grid-xsmall"><div class="e-cell e-cell-xsmall"><select class="e-select e-select__select2 e-select-large" id="field_1" name="field_1" onchange="ChangeElement(1)"><option value="">-- select field --</option><option value="10">Address</option></select></div><div class="e-cell e-cell-xsmall"><select class="e-select e-select__select2 e-select-large" id="op_1" name="op_1" onchange="OperatorChanged(1)"><option value="">N/A</option></select></div><div class="e-cell e-cell-xsmall"><span id="crit_1_td"><input class="e-input e-input-large" id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)"></span></div></div></td><td align="right" width="1"><div class="e-btn e-btn-onlyicon e-btn-secondary"><e-icon icon="minus" color="white"></e-icon></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr id="tr_2"><td class="e-criteria__item" id="td_2"><table class="table_condition" width="100%"><tbody id="table_2"><tr><td id="td_2_right"><table width="100%"><tbody id="table_2_children"><tr id="tr_1"><td id="td_1"><table class="table_crit" width="100%"><tbody id="table_1"><tr><td style="white-space: nowrap;"><div class="e-grid e-grid-xsmall"><div class="e-cell e-cell-xsmall"><select class="e-select e-select__select2 e-select-large" id="field_1" name="field_1" onchange="ChangeElement(1)"><option value="">-- select field --</option><option value="10">Address</option></select></div><div class="e-cell e-cell-xsmall"><select class="e-select e-select__select2 e-select-large" id="op_1" name="op_1" onchange="OperatorChanged(1)"><option value="">N/A</option></select></div><div class="e-cell e-cell-xsmall"><span id="crit_1_td"><input class="e-input e-input-large" id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)"></span></div></div></td><td align="right" width="1"><div class="e-btn e-btn-onlyicon e-btn-secondary"><e-icon icon="minus" color="white"></e-icon></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr id="tr_2"><td class="e-criteria__item" id="td_2"><table class="table_condition" width="100%"><tbody id="table_2"><tr><td id="td_2_right"><table width="100%"><tbody id="table_2_children"><tr id="tr_1"><td id="td_1"><table class="table_crit" width="100%"><tbody id="table_1"><tr><td style="white-space: nowrap;"><div class="e-grid e-grid-xsmall"><div class="e-cell e-cell-xsmall"><select class="e-select e-select__select2 e-select-large" id="field_1" name="field_1" onchange="ChangeElement(1)"><option value="">-- select field --</option><option value="10">Address</option></select></div><div class="e-cell e-cell-xsmall"><select class="e-select e-select__select2 e-select-large" id="op_1" name="op_1" onchange="OperatorChanged(1)"><option value="">N/A</option></select></div><div class="e-cell e-cell-xsmall"><span id="crit_1_td"><input class="e-input e-input-large" id="crit_1" name="crit_1" type="text" value="" onchange="critChanged(1)"></span></div></div></td><td align="right" width="1"><div class="e-btn e-btn-onlyicon e-btn-secondary"><e-icon icon="minus" color="white"></e-icon></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>Without table layout
<div class="e-criteria e-criteria-noscroll">
<div class="e-criteria__item e-criteria__item-table">
<div class="e-criteria__title">
Criterion:
</div>
<div class="e-criteria__crits">
<ul class="e-list">
<li>
Email response (open or click)
</li>
<li>
Responded via email
</li>
<li>
No time restriction
</li>
<li>
Email response (open or click)
</li>
<li>
Responded via email
</li>
<li>
No time restriction
</li>
</ul>
</div>
<div class="e-criteria__actions">
<div class="e-buttongroup float-right">
<div class="e-btn">
Edit
</div>
<div class="e-btn e-btn-onlyicon e-btn-secondary">
<e-icon icon="minus"></e-icon>
</div>
</div>
</div>
</div>
</div>
<div class="e-criteria e-criteria-noscroll"><div class="e-criteria__item e-criteria__item-table"><div class="e-criteria__title">Criterion:</div><div class="e-criteria__crits"><ul class="e-list"><li>Email response (open or click)</li><li>Responded via email</li><li>No time restriction</li><li>Email response (open or click)</li><li>Responded via email</li><li>No time restriction</li></ul></div><div class="e-criteria__actions"><div class="e-buttongroup float-right"><div class="e-btn">Edit</div><div class="e-btn e-btn-onlyicon e-btn-secondary"><e-icon icon="minus"></e-icon></div></div></div></div></div>Criterion:
- Email response (open or click)
- Responded via email
- No time restriction
- Email response (open or click)
- Responded via email
- No time restriction