如何使用jQuery用表单的文本字段填充表格？

我有两张表格。第一个表单

#form1

包含两个文本字段（月份和年份）和一个搜索按钮。第二个表单

#form2

包含一个表

我想当我点击按钮搜索时，隐藏form1并显示form2，也就是说，我想按年份和月份填写表格1的字段

index.balde.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="row" id="form1">
        <div class="col-md-12">
            <div class=" col-md-10 col-md-offset-1">
                <div class="form-group col-md-3">
                    <label for="titre">Annee</label>
                </div>
                <div class="form-group col-md-5">
                    <input type="text" name="annee" id="annee" class="form-control">
                </div>
           </div>

           <div class=" col-md-10 col-md-offset-1">
               <div class="form-group col-md-3">
                   <label for="titre">Mois</label>
               </div>
               <div class="form-group col-md-5">
                   <input type="text" name="mois" id="mois" class="form-control">
               </div>
           </div>
           <div class="col-md-2 col-md-offset-5">
               <button class="btn btn-theme " type="submit" id="hide" >cherche</button>
           </div>
       </div>
       <div class="row" id="form2">
           <table id="example" class="table table-striped table-bordered" style="width:100%">
               <thead>
                   <tr>
                       <th>name</th>
                       <th>year</th>
                       <th>month</th>
                   </tr>
               </thead>
               <tbody id="b">
                   @foreach($salaries as $salarie)
                   <tr>
                       <td>{{ $salarie->nom }}</td>
                       <td><input type="hidden" class='year' class="form-control" /></td>
                       <td><input type="hidden" class='month' class="form-control" /></td>
                   </tr>
                   @endforeach
               </tbody>
           </table>
       </div>
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

---

在您提供的HTML代码中，

#form2

位于

#form1

内。因此，隐藏

#form1

也将隐藏

#form2

此外，当您单击

#hide

按钮时，您正在选择带有

$（“#年”）

和

$（“#月”）

的表格单元格，但您应该按类选择，因为您的输入是：

<td><input type="hidden" class='year' class="form-control" /></td>
<td><input type="hidden" class='month' class="form-control" /></td>

还要注意的是，由于您的表输入具有

type=“hidden”

，因此不会显示它们

<td><input type="hidden" class='year' class="form-control" /></td>
<td><input type="hidden" class='month' class="form-control" /></td>

$("#hide").click(function(){
    $("#form2").show();
    $("#form1").hide();
    let annee = $("#annee").val();
    let mois = $("#mois").val();
    $('.year').val(annee);
    $('.month').val(annee); 
});