CODEWITHSUNDEEP
phpjqueryhtmlmysql
payal_suthar
payal_suthar

Reputation: 455

i want to retrieve selected row data in textboxes in html using jquery

i have used html table to display data from database using PHP. I have id,client name ,staff name and matter columns in database and i am displaying only client name, staff name and matter columns in the html table.i have three textbox for client name ,staff name, matter .now, i want to display the selected row's data in the three textbox respectively.

$(document).ready(function () {      
     $('#tableresult tr').click(function (event) {
          alert(this.id); //trying to alert id of the clicked row          

     });
 });

i tried this ,still not working-

$('#editclientname').val($(this).attr('client_name'));

html markups-

<label for="Client Name">Client Name</label><br />
                            <input type="text" id="editclientname" name="editclientname" />
                             </div>

                             <div class="col-md-2">
                             <label for="Staff Name">Staff Name</label><br />
                            <input type="text" id="editstaffname" name="editstaffname" />
                             </div>

                              <div class="col-md-2">
                             <label for="Matter">Matter</label><br />
                            <input type="text" id="editmatter" name="editmatter" />
                             </div>

table and php code-

 <table class="footable" data-filter="#filter" id="tableresult">
                              <thead>
                                <tr>

                                  <th>Client Name</th>
                                  <th>Staff Name</th>
                                  <th>Matter</th>
                                </tr>
                              </thead>
                              <tbody>
                                <?php 
                                 include_once 'db.php';
                                 $sql = "SELECT * FROM newdata";
                                 $result = mysqli_query($con, $sql);
                                 while ($row = mysqli_fetch_array($result)):; ?>
                                 <tr>
                                  <td><?php echo $row[2]; ?></td>
                                  <td><?php echo $row[3]; ?></td>
                                  <td><?php echo $row[4]; ?></td>
                                 </tr>
                               <?php endwhile; ?>
                              </tbody>

Upvotes: 1

Views: 2172

Answers (2)

Ahs N
Ahs N

Reputation: 8386

Another alternative to the answer:

$('#tableresult tr').click(function(event) {
  $(this).find("td").each(function(index) {
    $($("input").get(index)).val($(this).text());
  });
});

Here is the JSFiddle demo :D

Upvotes: 0

Jai
Jai

Reputation: 74738

I would recommend to use .each() with the index as parameter as: 

    $('#tableresult tr').click(function(event) {
      $('td', this).each(function(i) {
        $('.inputWrapper input').eq(i).val(this.textContent);
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='inputWrapper'>
  <input type='text'>
  <input type='text'>
  <input type='text'>
</div>
<table id='tableresult'>
  <tr>
    <td>foo</td>
    <td>bar</td>
    <td>baz</td>
  </tr>
</table>

Upvotes: 1

Related Questions