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

时间:2016-01-08 12:52:51

标签: php jquery html mysql

我使用html表来使用PHP显示数据库中的数据。我在数据库中有id,客户名称,员工姓名和事项列,我在html table.i中只显示客户名称,员工姓名和事项列。我有三个文本框用于客户名称,员工姓名,事项。现在,我想要分别在三个文本框中显示所选行的数据。

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

2 个答案:

答案 0 :(得分:1)

我建议将.each()与索引一起用作参数:

&#13;
&#13;
    $('#tableresult tr').click(function(event) {
      $('td', this).each(function(i) {
        $('.inputWrapper input').eq(i).val(this.textContent);
      });
    });
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

答案的另一种选择:

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

Here is the JSFiddle demo :D