Problem When pulling data from different tables for Inputs

Asked

Viewed 28 times

0

I’m having a problem pulling the values that are within two tables different for some inputs. When clicking on a tr of table the script created pull your values and sends to some Inputs that are on the same page, by doing this with only one table the code works perfectly.

Here’s the code I used in the first Table

 <form action ="evento.php?reserva=true" method = "post">
      <div class="col-md-12 form-group form-group-lg">
      <center> <h2>Equipamentos
</h2></center>
</div>
 <table border="2"  id='table'>
 <thead>
<tr>
  <th>Id</th>
  <th>Equipamento</th>
  <th>Cor</th>
  <th>Marca</th>
  <th>Categoria</th>
</tr>
<style type="text/css">
  tbody tr:hover{background-color:#555} 

</style>
</thead>
<tfoot>
    <tr>
        <td colspan="7"><center><script language=javascript type="text/javascript">
    dayName = new Array ("domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado")
monName = new Array ("janeiro", "fevereiro", "março", "abril", "maio", "junho", "agosto", "outubro", "novembro", "dezembro")
now = new Date
document.write (" Hoje é " + dayName[now.getDay() ] + ", " + now.getDate () + " de " + monName [now.getMonth() ]   +  " de "  +     now.getFullYear () + "   ")
document.write ( + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() )
</script></center></td>
    </tr>
</tfoot>
<center>
  <?php
            //include_once "conexao.php"; 
            $sql = "select * from equipamentos";
            $result = mysql_query($sql,$con);
            if($result){
            while($linha1 = mysql_fetch_array($result)){
?>
<tbody>
       <tr id="<?php echo $linha1['id_equipamento']; ?>">
          <td data-target="id_equipamento"> <?php echo $linha1['id_equipamento'];?></td>
           <td data-target="nomeequip1"> <?php  echo $linha1['nomeequip'];?></td>
           <td data-target="corequip1"> <?php  echo $linha1['corequip'];?></td>
           <td data-target="marcaequip1"> <?php  echo $linha1['marcaequip'];?></td>
           <td data-target="categoriaequip1"> <?php  echo $linha1['categoriaequip'];?></td>      
   </tr>
        <?php
          }//fim do while
          }//fim do if 
          ?>
</tbody>
</table>

And the Script

            <script type="text/javascript">
    $('tbody tr').click(function(){
        var id = $(this).attr('id');
        $.each($('#'+id+" td"),function(){
            var target = $(this).data('target');
            $("input[name='"+target+"']").val($(this).html());
        });
    });
</script>

And they’re for these Inputs which data from the first Table are targeted

 <div class="form-group your-id">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="id_equipamento" style="display: none">
  </div>
   
           <div class="col-md-4 col-sm-9 col-xs-9 form-group form-group-lg">
 Nome Do Equipamento:<br/>
  <div class="form-group your-equip">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="nomeequip1" disabled required>
  </div>
   </div>
    <div class="col-md-5 form-group form-group-lg"> Marca:<br/>
      <div class="form-group marca">
        <input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required  form-control form-control" name="marcaequip1" disabled required>
      </div> 
    </div>
      <div class="col-md-5 col-sm-10 col-xs-10 form-group form-group-lg">
 Cor:<br/>
  <div class="form-group cor">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="corequip1" disabled required>
  </div>
   </div>
    <div class="col-md-5 form-group form-group-lg"> Categoria<br/>
      <div class="form-group Categoria">
        <input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required  form-control form-control" name="categoriaequip1" disabled required>
      </div> 
      </div>
      <br>
      <div class="col-md-3 form-group form-group-lg"> Data da Reserva<br/>
      <div class="form-group Categoria">
        <input class="wpcf7-form-control wpcf7-data wpcf7-validates-as-required  form-control form-control" type="date" name="data" required>
      </div> 
      </div>

but recently I had the need to add another Table with different data and wish that she can do the same thing as the first table. I created new inputs and tried to direct the values of that second table for these new inputs, but then I came across the problem I am currently facing. When clicking on the second table it simply pull the wrong data into the wrong fields instead of taking the data from the second table and take to the inputs targeted, it takes the data from the first Table and simply update the data that then in the first Inputs.

Code and Inputs of the Second Table

<table border="2">
  <div class="col-md-12 form-group form-group-lg">
      <center> <h2>Professores
</h2></center>
</div>
   <thead>
    <tr>
  <th>Id</th>
  <th>Professor</th>
</tr>

</thead>
          <?php
            $sql = "select * from professor";
            $result = mysql_query($sql,$con);
            if($result){
            while($linha1 = mysql_fetch_array($result)){
?>
<tbody>
      <tr id="<?php echo $linha1['id_professor']; ?>">
          <td data-target="id_professor"> <?php echo $linha1['id_professor'];?></td>
           <td data-target="nomepro1"> <?php  echo $linha1['nomepro'];?></td>     
       </tr>
</tbody>
<?php
          }//fim do while
          }//fim do if  
          mysql_close($con);
?>
</table> 






 <div >
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="id_professor" >
  </div>
      <div class="col-md-3 form-group form-group-lg"> Professor<br/>
      <div >
        <input class="wpcf7-form-control wpcf7-data wpcf7-validates-as-required  form-control form-control"  name="nomepro1">
      </div> 
      </div>

the Script which use for both is exactly the same.

1 answer

0


Consider placing different ids from

 <tr id="<?php echo $linha1['id_equipamento']; ?>"> 

in

 <tr id="<?php echo $linha1['id_professor']; ?>">

Test example with ids 1 and 2 in the first table and 3 and 4 in the second table

    $('tbody tr').click(function(){
        var id = $(this).attr('id');
        $.each($('#'+id+" td"),function(){
            var target = $(this).data('target');
            $("input[name='"+target+"']").val($(this).html());
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action ="evento.php?reserva=true" method = "post">
      <div class="col-md-12 form-group form-group-lg">
      <center> <h2>Equipamentos
</h2></center>
</div>
 <table border="2"  id='table'>
 <thead>
<tr>
  <th>Id</th>
  <th>Equipamento</th>
  <th>Cor</th>
  <th>Marca</th>
  <th>Categoria</th>
</tr>
<style type="text/css">
  tbody tr:hover{background-color:#555} 

</style>
</thead>
<tfoot>
    <tr>
        <td colspan="7"><center><script language=javascript type="text/javascript">
    dayName = new Array ("domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado")
monName = new Array ("janeiro", "fevereiro", "março", "abril", "maio", "junho", "agosto", "outubro", "novembro", "dezembro")
now = new Date
document.write (" Hoje é " + dayName[now.getDay() ] + ", " + now.getDate () + " de " + monName [now.getMonth() ]   +  " de "  +     now.getFullYear () + "   ")
document.write ( + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() )
</script></center></td>
    </tr>
</tfoot>
<center>

<tbody>
       <tr id="1">
          <td data-target="id_equipamento"> id_equipamento</td>
           <td data-target="nomeequip1">nomeequip</td>
           <td data-target="corequip1"> corequip</td>
           <td data-target="marcaequip1">marcaequip</td>
           <td data-target="categoriaequip1"> categoriaequip</td>      
   </tr>
          <tr id="2">
          <td data-target="id_equipamento"> id_equipamento2</td>
           <td data-target="nomeequip1">nomeequip2</td>
           <td data-target="corequip1"> corequip2</td>
           <td data-target="marcaequip1">marcaequip2</td>
           <td data-target="categoriaequip1"> categoriaequip2</td>      
   </tr>

</tbody>
</table>

<div class="form-group your-id">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="id_equipamento" style="display: none">
  </div>
   
           <div class="col-md-4 col-sm-9 col-xs-9 form-group form-group-lg">
 Nome Do Equipamento:<br/>
  <div class="form-group your-equip">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="nomeequip1" disabled required>
  </div>
   </div>
    <div class="col-md-5 form-group form-group-lg"> Marca:<br/>
      <div class="form-group marca">
        <input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required  form-control form-control" name="marcaequip1" disabled required>
      </div> 
    </div>
      <div class="col-md-5 col-sm-10 col-xs-10 form-group form-group-lg">
 Cor:<br/>
  <div class="form-group cor">
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="corequip1" disabled required>
  </div>
   </div>
    <div class="col-md-5 form-group form-group-lg"> Categoria<br/>
      <div class="form-group Categoria">
        <input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required  form-control form-control" name="categoriaequip1" disabled required>
      </div> 
      </div>
      <br>
      <div class="col-md-3 form-group form-group-lg"> Data da Reserva<br/>
      <div class="form-group Categoria">
        <input class="wpcf7-form-control wpcf7-data wpcf7-validates-as-required  form-control form-control" type="date" name="data" required>
      </div> 
      </div>
      
      <table border="2">
  <div class="col-md-12 form-group form-group-lg">
      <center> <h2>Professores
</h2></center>
</div>
   <thead>
    <tr>
  <th>Id</th>
  <th>Professor</th>
</tr>

</thead>

<tbody>
      <tr id="3">
          <td data-target="id_professor"> id_professor1</td>
           <td data-target="nomepro1"> nomepro1</td>     
       </tr>
       <tr id="4">
          <td data-target="id_professor"> id_professor2</td>
           <td data-target="nomepro1"> nomepro2</td>     
       </tr>
</tbody>

</table> 


 <div >
    <input class="wpcf7-form-control wpcf7-text  wpcf7-validates-as-required form-control form-control" name="id_professor" >
  </div>
      <div class="col-md-3 form-group form-group-lg"> Professor<br/>
      <div >
        <input class="wpcf7-form-control wpcf7-data wpcf7-validates-as-required  form-control form-control"  name="nomepro1">
      </div> 
      </div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.