如何将输入的值放入表中的一组<td> inputs </td>中,请使用jquery

时间:2019-06-16 18:45:15

标签: jquery

我在一个form1中有一个输入,并且一个表包含在form 2中的input2,我想在单击按钮validate时将form1的input1的值放入数组input2 form2中,在我的情况下,它给出了值仅在表的第一行的第一个输入1处,知道按钮会验证隐藏form1并显示form2.plz帮助

<div id='form1'>
     <div class="form-group col-md-4 col-md-offset-4">
        <label>number day 1</label>
       <input type="text" id='input1' class="form-control" placeholder="nombre de jour 1">
       <span id='error'>Input can not blank</span>
     </div> 
           <table class="table table-bordered">
   <tr>
      <td>aa</td>
      <td>bb</td>
      <td>cc</td>
      <td>dd</td>
   </tr>
   <tr>
      <td>ee</td>
      <td>ff</td>
      <td>gg</td>
      <td>hh</td>
   </tr>

</table>

 <div class="form-group col-md-offset-5 ">
    <button id="hide" class="btn btn-success " type="submit">valider</button>
  </div>

</div>
<!------table2 ------>
<div id='form2'>
   <table class="table table-bordered">
   <tr>
      <td><input type="text" id='input2' class="form-control" placeholder="nombre de jour 2"></td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
   </tr>
   <tr>
      <td><input type="text" id='input2' class="form-control" placeholder="nombre de jour 2"></td>
      <td>rr</td>
      <td>rr</td>
      <td>rr</td>
   </tr>
  </table>
</div>

对jquery进行编码以显示和隐藏表单并将值输入:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
 $(document).ready(function(){
  $("#hide").click(function(){
let value = $('#input1').val();

if (value == ""){
   $('#error').show();
}else{
    $("#form1").hide();
     $("#form2").show();

     $('#input2').val(value);
 }
  });

});

代码CSS

        <style>
    #form2{
display:none;
}
#error{
color:red;
display:none;
}

</style>

1 个答案:

答案 0 :(得分:1)

如果我正确理解了您的问题,则要将表1中的输入框的值放入表中的两个输入框。

将id =“ input2”更改为class =“ input2”,然后在jQuery中更改选择器。

这是您需要更改的内容

      <div id='form2'>
     <table class="table table-bordered">
     <tr>
        <td><input type="text" class='input2' class="form-control" placeholder="nombre de jour 2"></td>
        <td>rr</td>
        <td>rr</td>
        <td>rr</td>
     </tr>
     <tr>
        <td><input type="text" class='input2' class="form-control" placeholder="nombre de jour 2"></td>
        <td>rr</td>
        <td>rr</td>
        <td>rr</td>
     </tr>
    </table>
  </div>


  $(document).ready(function(){
    $("#hide").click(function(){
  let value = $('#input1').val();

  if (value == ""){
     $('#error').show();
  }else{
      $("#form1").hide();
       $("#form2").show();

       $('.input2').val(value);
   }
    });

  });