layui查询多条输入框的数据并且显示表格

可以使用layui的table模块和form模块来实现查询多条输入框的数据并显示在表格中。

首先在HTML页面中添加多个输入框和一个查询按钮，如下所示：

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="name" placeholder="请输入姓名" class="layui-input">
    </div>
    <label class="layui-form-label">性别</label>
    <div class="layui-input-inline">
      <input type="text" name="gender" placeholder="请输入性别" class="layui-input">
    </div>
    <<div class="layui-form-item">
    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">查询</button>
  </div>
</form>

接下来需要引入layui的form模块和table模块，并编写JS代码实现查询和表格显示的逻辑。

layui.use(['form', 'table'], function(){
  var form = layui.form;
  var table = layui.table;

  // 监听表单提交事件
  form.on('submit(formDemo)', function(data){
    // 获取输入框的值
    var name = data.field.name;
    var gender = data.field.gender;

    // 发送AJAX请求，获取数据
    $.ajax({
      url: 'data.json', // 数据接口
      data: {name: name, gender: gender},
      type: 'get',
      dataType: 'json',
      success: function(res){
        // 渲染表格
        table.render({
          elem: '#demo',
          cols: [[
            {field: 'name', title: '姓名'},
            {field: 'gender', title: '性别'},
            {field: 'age', title: '年龄'}
          ]],
          data: res // 数据
        });
      }
    });

    return false; // 阻止表单跳转
  });
});

在上述代码中，我们使用了layui的form模块监听了表单的提交事件，获取输入框的值，并通过AJAX请求获取数据。最后使用table模块渲染表格并将数据填充到表格中。

需要注意的是，我们需要将表格的HTML代码添加到页面中，如下所示：

<table id="demo" lay-filter="test"></table>

这样就可以实现查询多条输入框的数据并显示在表格中了。