单击行，使用其数据预填充表单，只显示第一条记录

Question

我有hound_view.php，它根据搜索/过滤标准显示记录。当用户单击一行时，会显示一个模式，其中包含一个用于编辑猎犬信息的表单，我希望根据单击的行预先填充该信息。

单击hound_view.php中的一行时，hound_record_click_event.js将其数据id发送到fill_hound_records.php，其中查询数据库，并为每一行数据分配一个变量，然后传递给edit_hound_records.php中的模式

我的问题是，当我单击任何行时，我只获取要填充的第一行的数据，但在fill_hound_records.php中，我回过头一个变量，以确保每一行都捕获其正确的信息。

​

​

请注意:此代码易受 SQL注入 攻击，不应直接复制。您应该使用带有绑定参数的 米斯里 或 PDO 准备语句，如中所述。

hound_view.php

  <tbody class="clickable-row" data-toggle="modal" data-target="#editModal" data-id="<?php echo $row['RegNumber'] ?>"> 

hound_record_click_event.js

 $(window).ready(function() {
      //bind the event using jquery not the onclick attribute of the button
      $('.clickable-row').on('click', updateClick);
 });

 function updateClick() {
  var dataid = $(this).data("id");
  $.ajax ({
         type: 'POST',
         url: "fill_hound_record.php",
         data: { dataid : dataid },
         success: function( result ) {
                alert(result);
         }
     });
 };

fill_hound_record.php

<?php
//include database configuration file
include('db.php');

$hounddataid = $_POST["dataid"];

//get rows
$prefillsql = "SELECT * FROM Hounds WHERE RegNumber = '$hounddataid'";
$prefillquery = mysqli_query($con,$prefillsql)or die(mysql_error());
$prefillnumrows = mysqli_num_rows($prefillquery);

if($prefillnumrows > 0){

  while($row = mysqli_fetch_array($prefillquery)){

    $prefillbreed = $row['Breed'];
    $_SESSION['pfbreed'] = $prefillbreed;
    $prefillregnumber = $row['RegNumber'];
    $_SESSION['pfregnumber'] = $prefillregnumber;

    echo $_SESSION['pfregnumber'];
}}
?>

edit_hound_record.php

  <input type="text" class="form-control" id="regnumber" name="regnumber" placeholder="Reg Number" value="<?php echo $_SESSION['pfregnumber']; ?>">

Answer 1

对于有类似问题的其他任何人；在fill_hound_record.php中，我在$hounddataid变量之前添加了一个if语句，因此在单击行之前不会收到未定义的索引。

if (isset($_POST["dataid"])) { 
  $hounddataid = $_POST["dataid"];
  ...
  }

我删除了edit_hound_record.php中的value属性，在fill_hound_record.php中创建了一个数组，其中包含填充表单所需的所有值，并用json编码。

$arr = array(
  'breed'=>$prefillbreed,
   ...
   );

echo json_encode($arr);
exit();

最后我加入了

dataType: 'json',
 success: function( data ) {
    $("#breed").val(data.breed);
    ...
    }

将所选的json数组值hound_record_click_event.js发送到字段中，该字段的id为品类。

Answer 2

因为没有关于引导版本的信息，如果表是用插件生成的，我建议您更改这一行：

<tbody class="clickable-row" data-toggle="modal" data-target="#editModal" data-id="<?php echo $row['RegNumber'] ?>"> 

通过以下方式：

<tbody class="clickable-row" data-toggle="modal" data-target="#editModal">

数据-id是当前单击行的第二个单元格文本。为了获得这个值，您可以使用：

$(e.target).closest('tr').find('td:eq(1)').text()

​

$(window).ready(function () {
    //bind the event using jquery not the onclick attribute of the button
    $('.clickable-row').on('click', updateClick);
});

function updateClick(e) {
    var dataid = $(e.target).closest('tr').find('td:eq(1)').text();
    $.ajax({
                type: 'POST',
                url: "fill_hound_record.php",
                data: {dataid: dataid},
                success: function (result) {
                    alert(result);
                },
                error: function () {
                    $('#editModal').find('.modal-body p').text(dataid);
                }
            }
    );
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table table-bordered">
    <thead>
    <tr>
        <th>Breed</th>
        <th>Reg Number</th>
        <th>Call Name</th>
        <th>Reg Name</th>
    </tr>
    </thead>
    <tbody class="clickable-row" data-toggle="modal" data-target="#editModal">
    <tr>
        <td>AH</td>
        <td>024193</td>
        <td>Nia</td>
        <td>Dog</td>
    </tr>
    <tr>
        <td>AH</td>
        <td>022222</td>
        <td>Nia</td>
        <td>Dog</td>
    </tr>
    </tbody>
</table>

<div class="modal fade" tabindex="-1" role="dialog" id="editModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

​

Answer 3

首先，我认为您的<tbody>应该是表行<tr>。

<tbody class="clickable-row" data-toggle="modal" data-target="#editModal" data-id="<?php echo $row['RegNumber'] ?>"> 

其次，在JS中，您希望获得数据id：

 $(this).attr("data-id") // will return the string "123"

或.data() (如果使用更新的jQuery >= 1.4.3)

$(this).data("id") // will return the number 123