php - 我想使用 jquery 在 html 的文本框中检索选定的行数据

Question

我已经使用 html 表格通过 PHP 显示数据库中的数据。我在数据库中有 id、客户姓名、员工姓名和事项列，我在 html 表中只显示客户姓名、员工姓名和事项列。我有三个文本框用于客户姓名、员工姓名、事项。现在，我想分别在三个文本框中显示选中行的数据。

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

     });
 });

我试过了，还是不行

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

html 标记-

<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>

表格和php代码-

 <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>

Answer 1

我建议使用 .each() 并将索引作为参数:

    $('#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>