获取行数据到 bootstrap 模态

Question

我正在从数据库中获取数据并通过 table 显示它。在 table 中，我想为每一行实现更新功能。为此，我使用 jquery。我能够检索文本数据，但无法从 table 行接收图像。我收到的数据显示在控制台上，但不是模态形式。单击更新按钮时，模态显示空白数据，但我希望它显示预填充的数据。

如何从行中获取图像以及为什么模态内没有显示数据？

我的table

<table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th scope="col">S.No</th>
                            <th scope="col">Title</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Size</th>
                            <th scope="col">Image</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <%
                            int i = 1;
                            for (Product res : result) {
                        %>
                        <tr>
                            <th scope="row"><%=i%></th>
                            <td><%=res.getTitle()%></td>
                            <td><%=res.getQuantity()%></td>
                            <td><%=res.getSize()%></td>
                            <td style="width: 25%"><img
                                src="C:/Users/shubhamrai/eclipse-workspace/Ecommerce/src/main/webapp/images/<%=res.getImage()%>"></td>
                            <td class="mt-5">
                            <button type="button" class="btn btn-sm editbtn btn-primary" data-toggle="modal"
                                    data-target="">Update</button></td>
                        </tr>
                        <%
                            i++;
                            }
                        %>
                    </tbody>
                </table>

我的模态

    <!-- Modal -->
    <div class="modal fade" id="editmodal" tabindex="-1"
        role="dialog" aria-labelledby="exampleModalLongTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Update Data</h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span class="text-lg-left" aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="AddProductControl" enctype="multipart/form-data"
                    method="POST" class="mb-5">
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="title" class="col-form-label">Title</label>
                        </div>
                        <div class="col-auto">
                            <input type="text" id="title" name="title" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-2 mb-4">
                        <div class="col-auto">
                            <label for="quantity" class="col-form-label">Quantity</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="quantity" id="quantity"
                                class="form-control">
                        </div>
                    </div>
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="size" class="col-form-label">Size</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="size" id="size" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-0">
                        <div class="col-auto">
                            <label for="image" class="col-form-label">Image</label>
                        </div>
                        <div class="col-auto ms-3">
                            <input type="file" id="image" name="image" class="form-control">
                        </div>
                    </div>
                    <div class="position-absolute m-3 bottom start-15 border">
                        <input class="bg-info" type="submit" value="Add"> <input
                            type="hidden" name="username" value="<%=currentUser%>" />
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function(){
        $('.editbtn').on('click', function(){

            $('#editmodal').modal('show');
            $tr =$(this).closest('tr');
            var data= $tr.children("td").map(function(){
              return $(this).text();
            }).get();

            console.log(data);
            $('#title').val(data[0]);
            $('#quantity').val(data[1]);
            $('#size').val(data[2]);
        });
    });
  </script>

Answer 1

这是一个您想要实现的工作演示，还有一件事您不能使用 jquery 将文件绑定到 HTML 输入类型文件。 For detail you can prefer this link

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

 

<table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th scope="col">S.No</th>
                            <th scope="col">Title</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Size</th>
                            <th scope="col">Image</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr>
                            <th scope="row">1</th>
                            <td>Title 1</td>
                            <td>521</td>
                            <td>1</td>
                            <td style="width: 25%;hieght:50%"><img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg" style="
    hight: 25px;
    height: 52px;
"></td>
                            <td class="mt-5">
                            <button type="button" class="btn btn-sm editbtn btn-primary" data-toggle="modal"
                                    data-target="">Update</button></td>
                        </tr>
                         
                    </tbody>
                </table>
                
                  <!-- Modal -->
    <div class="modal fade" id="editmodal" tabindex="-1"
        role="dialog" aria-labelledby="exampleModalLongTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Update Data</h5>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span class="text-lg-left" aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="AddProductControl" enctype="multipart/form-data"
                    method="POST" class="mb-5">
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="title" class="col-form-label">Title</label>
                        </div>
                        <div class="col-auto">
                            <input type="text" id="title" name="title" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-2 mb-4">
                        <div class="col-auto">
                            <label for="quantity" class="col-form-label">Quantity</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="quantity" id="quantity"
                                class="form-control">
                        </div>
                    </div>
                    <div class="row g-5 align-items-center">
                        <div class="col-auto">
                            <label for="size" class="col-form-label">Size</label>
                        </div>
                        <div class="col-auto ms-1">
                            <input type="number" name="size" id="size" class="form-control">
                        </div>
                    </div>
                    <div class="row g-3 align-items-center mt-0">
                        <div class="col-auto">
                            <label for="image" class="col-form-label">Image</label>
                        </div>
                        <div class="col-auto ms-3">
  
                            <input type="file" id="image" name="image" class="form-control">
                                                 <img src="img_girl.jpg" id="SetImage" alt="Your retrived image is here" width="100" height="100">
                        </div>
                    </div>
                    <div class="position-absolute m-3 bottom start-15 border">
                        <input class="bg-info" type="submit" value="Add"> <input
                            type="hidden" name="username" value="<%=currentUser%>" />
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
  <script>
    $(document).ready(function(){
        $('.editbtn').on('click', function(){

            $('#editmodal').modal('show');
            $tr =$(this).closest('tr');
            var data= $tr.children("td").map(function(){
              return $(this).text();
            }).get();

var Imagedata = [];
Imagedata.push($tr.find('img').attr('src'))

            
            $('#SetImage').attr("src",Imagedata[0]);
            $('#title').val(data[0]);
            $('#quantity').val(data[1]);
            $('#size').val(data[2]);
            
        });
    });
  </script>
</body>

 
</html>

获取行数据到 bootstrap 模态

Get row data into bootstrap modal

html

jquery

bootstrap-modal