Laravel和JQuery：动态添加表单元素
嗨，我有一个类似
这是我的代码段
<div class="table-filters">
<div class="form-group form-row main-form"> <!-- MAIN FORM -->
<div class="col col-2">
<label class="form-control-label" style="font-size: 18px">
Include Rows WHERE
</label>
</div>
<div class="col col-2">
<select name="main-form-select-column" class="form-control-sm form-control">
<option>COLUMN 1</option>
<option>COLUMN 2</option>
</select>
</div>
<div>
<label class="form-control-label" style="font-size: 18px">
IS
</label>
</div>
<div class="col col-2">
<select name="main-filter-operation-type" class="form-control-sm form-control">
<option {{ old('filter-operation-type') == 'contain' ? 'selected' : '' }} value="contain"> CONTAINS </option>
<option {{ old('filter-operation-type') == 'notcontain' ? 'selected' : '' }} value="notcontain"> DOES NOT CONTAIN </option>
<option {{ old('filter-operation-type') == 'equals' ? 'selected' : '' }} value="equals"> == </option>
<option {{ old('filter-operation-type') == 'notequal' ? 'selected' : '' }} value="notequal"> != </option>
<option {{ old('filter-operation-type') == 'lt' ? 'selected' : '' }} value="lt"> < </option>
<option {{ old('filter-operation-type') == 'gt' ? 'selected' : '' }} value="gt"> > </option>
<option {{ old('filter-operation-type') == 'lte' ? 'selected' : '' }} value="lte"> <= </option>
<option {{ old('filter-operation-type') == 'gte' ? 'selected' : '' }} value="gte"> >= </option>
<option {{ old('filter-operation-type') == 'blank' ? 'selected' : '' }} value="blank"> IS BLANK </option>
<option {{ old('filter-operation-type') == 'filled' ? 'selected' : '' }} value="filled"> IS FILLED </option>
</select>
</div>
<div class="col col-2">
<select id="main-filter-value-type-select" name="filter-value-type" class="form-control-sm form-control">
<option selected value="fixed">FIXED VALUE</option>
<option value="field">FIELD</option>
</select>
</div>
<div class="col col-2" id="main-toggle-filter-value-form">
<input type="text" id="main-filter-static-value" name="staticValue" class="form-control form-control-sm">
</div>
</div>
<div id="add-form-row" class="form-group form-row"> <!-- ADDITIONAL COLUMN FILTER -->
<div class="col col-1">
<select id="filter-group-function-type" name="filter-group-function" class="form-control-sm form-control">
<option selected value="and">AND</option>
<option value="or">OR</option>
</select>
</div>
<div class="col col-1">
<label class="form-control-label" style="font-size: 18px">
Rows WHERE
</label>
</div>
<div class="col col-2">
<select name="file-column-1" class="form-control-sm form-control">
<option>COLUMN 1</option>
<option>COLUMN 2</option>
</select>
</div>
<div>
<label class="form-control-label" style="font-size: 18px">
IS
</label>
</div>
<div class="col col-2">
<select name="filter-operation-type" class="form-control-sm form-control">
<option {{ old('filter-operation-type') == 'contain' ? 'selected' : '' }} value="contain"> CONTAINS </option>
<option {{ old('filter-operation-type') == 'notcontain' ? 'selected' : '' }} value="notcontain"> DOES NOT CONTAIN </option>
<option {{ old('filter-operation-type') == 'equals' ? 'selected' : '' }} value="equals"> == </option>
<option {{ old('filter-operation-type') == 'notequal' ? 'selected' : '' }} value="notequal"> != </option>
<option {{ old('filter-operation-type') == 'lt' ? 'selected' : '' }} value="lt"> < </option>
<option {{ old('filter-operation-type') == 'gt' ? 'selected' : '' }} value="gt"> > </option>
<option {{ old('filter-operation-type') == 'lte' ? 'selected' : '' }} value="lte"> <= </option>
<option {{ old('filter-operation-type') == 'gte' ? 'selected' : '' }} value="gte"> >= </option>
<option {{ old('filter-operation-type') == 'blank' ? 'selected' : '' }} value="blank"> IS BLANK </option>
<option {{ old('filter-operation-type') == 'filled' ? 'selected' : '' }} value="filled"> IS FILLED </option>
</select>
</div>
<div class="col col-2">
<select id="filter-value-type-select" name="filter-value-type" class="form-control-sm form-control">
<option selected value="fixed">FIXED VALUE</option>
<option value="field">FIELD</option>
</select>
</div>
<div class="col col-2" id="toggle-filter-value-form">
<input type="text" id="filter-static-value" name="staticValue" class="form-control form-control-sm">
</div>
<div class="col col-1">
<button id="deleteFilterRow" class="button btn-sm btn-outline-danger"><i class="fa fa-trash"> </i></button>
<button id="addFilterRow" class="button btn-sm btn-outline-primary"><i class="fa fa-plus-square"> </i></button>
</div>
</div>
</div>
<div class="form-group form-row">
<div class="col col-2">
<label class="form-control-label" style="font-size: 18px">
FILTER GROUP CONDITION
</label>
</div>
<div class="col col-2">
<select name="filter-group-type" class="form-control-sm form-control">
<option value="and">AND</option>
<option value="or">OR</option>
</select>
</div>
</div>
<div class="form-group form-row main-form"> <!-- MAIN FORM -->
<div class="col col-2">
<label class="form-control-label" style="font-size: 18px">
Include Rows WHERE
</label>
</div>
<div class="col col-2">
<select name="main-form-select-column" class="form-control-sm form-control">
<option>COLUMN 1</option>
<option>COLUMN 2</option>
</select>
</div>
<div>
<label class="form-control-label" style="font-size: 18px">
IS
</label>
</div>
<div class="col col-2">
<select name="main-filter-operation-type" class="form-control-sm form-control">
<option {{ old('filter-operation-type') == 'contain' ? 'selected' : '' }} value="contain"> CONTAINS </option>
<option {{ old('filter-operation-type') == 'notcontain' ? 'selected' : '' }} value="notcontain"> DOES NOT CONTAIN </option>
<option {{ old('filter-operation-type') == 'equals' ? 'selected' : '' }} value="equals"> == </option>
<option {{ old('filter-operation-type') == 'notequal' ? 'selected' : '' }} value="notequal"> != </option>
<option {{ old('filter-operation-type') == 'lt' ? 'selected' : '' }} value="lt"> < </option>
<option {{ old('filter-operation-type') == 'gt' ? 'selected' : '' }} value="gt"> > </option>
<option {{ old('filter-operation-type') == 'lte' ? 'selected' : '' }} value="lte"> <= </option>
<option {{ old('filter-operation-type') == 'gte' ? 'selected' : '' }} value="gte"> >= </option>
<option {{ old('filter-operation-type') == 'blank' ? 'selected' : '' }} value="blank"> IS BLANK </option>
<option {{ old('filter-operation-type') == 'filled' ? 'selected' : '' }} value="filled"> IS FILLED </option>
</select>
</div>
<div class="col col-2">
<select id="main-filter-value-type-select" name="filter-value-type" class="form-control-sm form-control">
<option selected value="fixed">FIXED VALUE</option>
<option value="field">FIELD</option>
</select>
</div>
<div class="col col-2" id="main-toggle-filter-value-form">
<input type="text" id="main-filter-static-value" name="staticValue" class="form-control form-control-sm">
</div>
</div>
<div id="add-form-row" class="form-group form-row"> <!-- ADDITIONAL COLUMN FILTER -->
<div class="col col-1">
<select id="filter-group-function-type" name="filter-group-function" class="form-control-sm form-control">
<option selected value="and">AND</option>
<option value="or">OR</option>
</select>
</div>
<div class="col col-1">
<label class="form-control-label" style="font-size: 18px">
Rows WHERE
</label>
</div>
<div class="col col-2">
<select name="file-column-1" class="form-control-sm form-control">
<option>COLUMN 1</option>
<option>COLUMN 2</option>
</select>
</div>
<div>
<label class="form-control-label" style="font-size: 18px">
IS
</label>
</div>
<div class="col col-2">
<select name="filter-operation-type" class="form-control-sm form-control">
<option {{ old('filter-operation-type') == 'contain' ? 'selected' : '' }} value="contain"> CONTAINS </option>
<option {{ old('filter-operation-type') == 'notcontain' ? 'selected' : '' }} value="notcontain"> DOES NOT CONTAIN </option>
<option {{ old('filter-operation-type') == 'equals' ? 'selected' : '' }} value="equals"> == </option>
<option {{ old('filter-operation-type') == 'notequal' ? 'selected' : '' }} value="notequal"> != </option>
<option {{ old('filter-operation-type') == 'lt' ? 'selected' : '' }} value="lt"> < </option>
<option {{ old('filter-operation-type') == 'gt' ? 'selected' : '' }} value="gt"> > </option>
<option {{ old('filter-operation-type') == 'lte' ? 'selected' : '' }} value="lte"> <= </option>
<option {{ old('filter-operation-type') == 'gte' ? 'selected' : '' }} value="gte"> >= </option>
<option {{ old('filter-operation-type') == 'blank' ? 'selected' : '' }} value="blank"> IS BLANK </option>
<option {{ old('filter-operation-type') == 'filled' ? 'selected' : '' }} value="filled"> IS FILLED </option>
</select>
</div>
<div class="col col-2">
<select id="filter-value-type-select" name="filter-value-type" class="form-control-sm form-control">
<option selected value="fixed">FIXED VALUE</option>
<option value="field">FIELD</option>
</select>
</div>
<div class="col col-2" id="toggle-filter-value-form">
<input type="text" id="filter-static-value" name="staticValue" class="form-control form-control-sm">
</div>
<div class="col col-1">
<button id="deleteFilterRow" class="button btn-sm btn-outline-danger"><i class="fa fa-trash"> </i></button>
<button id="addFilterRow" class="button btn-sm btn-outline-primary"><i class="fa fa-plus-square"> </i></button>
</div>
</div>
这是我一直在玩的Jquery代码示例
$('#addFilterRow').on('click', function() {
var filter_row = $('#add-form-row').html();
//console.log(filter_row);
//$('.table-filters').append(filter_row);
var html_opening_div = '<div id="add-form-row" class="form-group form-row">'
var html_closing_div = '</div>'
console.log(html_opening_div + filter_row + html_closing_div);
$('.table-filters').append(html_opening_div + filter_row + html_closing_div);
});
$('#deleteFilterRow').on('click', function() {
// var filter_row = $('#add-form-row').html();
//console.log(filter_row);
//$('.table-filters').append(filter_row);
$('#add-form-row').remove();
var sample = $('#add-form-row').remove();
console.log(sample);
});
我可以添加和删除行，但是如何使这些元素的名称属性动态化呢？我是否需要在jquery中手动构建它们，并为每个表单名称属性添加类似id的参数？任何建议，将不胜感激。谢谢。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？