как заполнить таблицу, используя jQuery?

Question

У меня есть две формы.

Форма 1 содержит два текстовых поля год и месяц и кнопку подтверждения, которая скрывает форму 1 и отображает форму 2, которая также содержит год и месяц таблицы.

Я хочу отображать год и месяц в таблице, используя jQuery этим методом в коде ниже, я пытаюсь этот код, но он не работает.

index. php

$(document).ready(function() {
  $("#form2").hide();

  let now = new Date();
  let year = now.getFullYear();
  let month = ("0" + (now.getMonth() + 1)).slice(-2);
  $('#annee').val(year);
  $('#mois').val(month);

  $("#hide").click(function() {
    $("#form1").hide();
    $("#form2").show();

    let year2 = $('#annee').val();
    let month2 = $('#mois').val();
    let html = `<tr>
      <td><input type="hidden" class='year2' class="form-control"/></td>
      <td><input type="hidden" class='month2' class="form-control"/></td>
    </tr>
    <tr>
      <td><input type="hidden" class='year' class="form-control"/></td>
      <td><input type="hidden" class='month' class="form-control"/></td>
    </tr>`;
    $('#mytable').append(html);

  });
});

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

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">


<div id="form1">

  <div class=" col-md-8 col-md-offset-2">
    <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-8 col-md-offset-2">
    <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="form-group col-md-2 col-md-offset-5 ">
    <button class="btn btn-success " type="submit" id="hide">valider</button>
  </div>
</div>
<!--form 2-->
<div id="form2">


  <table class="table table-bordered" id="mytable">
    <tr>
      <th>year</th>
      <th>month</th>
    </tr>
  </table>
</div>

Answer 1

Вы не передаете значение на вход. Используйте литералы шаблона `$ {}` для встраивания значений в строку.

   let year2 = $('#annee').val();
   let month2 = $('#mois').val();
   let html = `<tr>
    <td><input type="text"  value="${year2}" class="form-control"/></td>
    <td><input type="text" value="${month2}" class="form-control"/></td>
   </tr>`
   $('#mytable').append(html);

$(document).ready(function() {
  $("#form2").hide();
  let now = new Date();
  let year = now.getFullYear();
  let month = ("0" + (now.getMonth() + 1)).slice(-2);
  $('#annee').val(year);
  $('#mois').val(month);
  $("#hide").click(function() {
    $("#form1").hide();
    $("#form2").show();
    let year2 = $('#annee').val();
    let month2 = $('#mois').val();
    let html = `<tr>
      <td><input type="text"  value="${year2}" class="form-control"/></td>
      <td><input type="text" value="${month2}" class="form-control"/></td>
    </tr>`
    $('#mytable').append(html);

  });
});

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

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">


<div id="form1">

  <div class=" col-md-8 col-md-offset-2">
    <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-8 col-md-offset-2">
    <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="form-group col-md-2 col-md-offset-5 ">
    <button class="btn btn-success " type="submit" id="hide">valider</button>
  </div>
</div>
<!--form 2-->
<div id="form2">


  <table class="table table-bordered" id="mytable">
    <tr>
      <th>year</th>
      <th>month</th>
    </tr>
  </table>
</div>