design sketch :

Element analysis :

Each row represents one <form>, according to id To identify , adopt layui Of form.val() Method to get the value

be careful

    layui Of table use where There will be a cache , So you need to set the where The cache content of is set to empty  

    Namely done: function (res, curr, count) { this.where = {}; }

code

html part
<button class="layui-btn layui-btn-normal" id="add"> Add condition </button> <button
class="layui-btn layui-btn-danger" id="del"> Delete selected condition </button> <button
style="margin-left: 10px;" class="layui-btn" type="button" id="search"><i
class="layui-icon layui-icon-search"></i> query </button> <div id="searchForm"></div>
js part ( My first select The content is pulled from the back end , So we need to splice )

form The splicing content of can be defined by itself , It is recommended to write a static one first form Look at the effect , Then copy the code to nodepade++ Press inside ctrl+j It becomes a line
layui.use('form', function () { var form = layui.form; var num = 0;
$("#add").click(function () { num++; var htmls = '<form id="fnum' + num + '"
class="layui-form" lay-filter="fnum' + num + '"><br /> <div
class="layui-input-inline"><input type="checkbox" name="ifDel' + num + '"
value="fnum' + num + '" lay-skin="primary"></div> <div
class="layui-input-inline"> <select id="columns" name="field"></select> </div>
<div class="layui-input-inline" style="margin-left: 20px;"> <select id="type"
name="type"> <option value=""> Please select query method </option> <option
value="term">term</option> <option value="match">match</option> </select>
</div> <div class="layui-input-inline" style="margin-left: 20px;"> <input
type="text" name="value" id="value" lay-verify="title" placeholder=" Enter matching value "
class="layui-input"> </div> </form>'; $("#searchForm").append(htmls); var htmls
= '<option value=""> Please select field name </option>'; for (var x in columnData) { htmls +=
'<option value = "' + columnData[x].columnName + '">' +
columnData[x].columnName + '</option>' } $("#fnum" + num + "
#columns").html(htmls); // Render it again form.render(); }) var delList = []; var index
= 0; // Delete query condition $("#del").click(function () {
$('input[type="checkbox"]:checkbox:checked').each(function (index, value) { var
id = $(this).val(); $("#" + id).remove(); delList[index++] = id; }); })
// Listen to search button $("#search").click(function () { var list = []; console.log(delList);
for (var i = 1, j = 0; i <= num; i++) { if ($.inArray('fnum' + i, delList) ==
-1) { var data = form.val('fnum' + i); list[j++] = data; } } console.log(list);
table.reload('table4', { url: '/cluster/data/conditions', method: 'post',
where: { "clusterId": $("#clusterId").val(), "indexName":
$("#indexName").val(), "list": list, "status": 0 }, contentType:
'application/json;charset=UTF-8', done: function (res, curr, count) {
this.where = {}; } }) }) });
 

Technology
©2020 ioDraw All rights reserved
Front end code specification you don't know Structure of payment access platformMind map novice guidekotlin use Parcelize replace Parcelable As well as the pits encountered Product manager project management mind map Yuan Longping's team once again increased the yield of double cropping rice per mu 1500 Kg sprint be based on php Snowflake algorithm based on (snowflake)1 Trillion yuan ! Analysts estimate : Ant group's valuation has shrunk by up to half Mind map of learning notesWeekly planning mind map template