Question

我想将查询结果传递给Modal。结果包含项目列表和说明结果的每一行都有一个出价按钮。 “出价”按钮可打开包含项目信息的模式。

我想显示模型中相应行的详细信息，但我无法这样做。

这是代码。

<div class="col-lg-12">
<center>
 <table class="auction_det" style="width:100%;" border="1">
 <th>ID</th>
    <th>Item Name</th>
    <th>Description</th>
    <th>Cost</th>
    <th>Current Bid</th>
    <th>Close Date</th>
    <th>Image</th>
  <?php
    if( !empty($results) ) 
    {

    foreach($results as $row) {

    echo '<tr>';
    echo '<td id="id">'.$row->item_id.'</td>';
    echo '<td class="name">'.$row->name.'</td>';
    echo '<td class="desc">'.$row->item_desc.'</td>';
    echo '<td class="cost">'.$row->item_cost.'</td>';
    echo '<td class="open">'.$row->open_date.'</td>';
    echo '<td class="date">'.$row->close_date.'</td>';
    echo '<td class="img"><center><img style="width:300px;height:100px;"src='.$row->img_path.'></center></td>';
    ?>
    <td><button type="button" class="btn" data-toggle="modal" data-target="#moreInfo">Bid</button></td><?php    
    echo '</tr>';

}
}
?>
</table>

脚本

<script>
    $(document).ready(){
        $('.btn').click(function(){
            var $row = $(this).closest('tr');
            var name =  $row.find('.name').val();
            $('#name').text(name);
            $('#moreInfo').modal('show');
        });
    });//END document.ready
</script>

模态

 <div class="modal fade" tab-index="-1" id="moreInfo" role="dialog" aria-labelledby="moreInfoLabel" aria-hidden="true">
       <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h3>Item Details</h3>
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="moreInfoLabel"></h4>
           </div>
          <div="modal-body">
        <p>Name:<label id="name"> *QUERY RESULT HERE* </label></p>
</div>

Answer 1

而不是var name = $row.find('.name').val();使用：

var name = $row.find('.name').text();或 var name = $row.find('.name').html();

Answer 2

我更改了您的代码并创建了一个演示：

演示：https://jsfiddle.net/94yyar96/6/

    $(document).on('click','.btn',function(){
        var row = $(this).closest('tr');
        var name = row.find('.name').text();
        $('#moreInfo').find('#name').html(name);
        $('#moreInfo').modal('show');
    });

将照片传递给模态：

    $(document).on('click','.btn',function(){
        var row = $(this).closest('tr');
        var name = row.find('.name').text();
        $('#moreInfo').find('#name').html(name);
        var img_url = row.find(".img img").attr("src"); //get image src
        $('#moreInfo').append('<img src="+img_url+">'); //create img tag in #moreInfo
        $('#moreInfo').modal('show');
    });

优化代码：

    $(document).on('click','.btn',function(){
        var row = $(this).closest('tr');
        $('#moreInfo').find('#name').html(row.find('.name').text());
        $('#name').after('<img src="'+row.find(".img img").attr("src")+'">'); //create img tag in #moreInfo
        $('#moreInfo').modal('show');
    });

要创建图片，您可以使用.after()或.html()等.append()

将查询结果的值传递给模态

2 个答案: