php - jquery 模式对话框不发送来自 2 个表的多个数据

Question

我在使用引导模式查找(jQuery 模式对话框)从 2 个表中检索数据时遇到困难，

所以，我有 2 个表:

 first is Student Table
Id      studentCode     studentName

1       S01             Michael Jordan

2       S02             Patric Ewing

和另一个表:

Books

id  studentCode  bookCode  bookName

1    S01         B001      PHP

2    S01         B002      SQL

3    S02         B003       C#

4    S02         B004      Java

我有这段代码，使用 jQuery 对话框从学生和书籍表中检索数据:

<div class="row">
        <div class="col-md-5">
            <h2>&nbsp;</h2>
        </div>
    </div>
    <form action="action" onsubmit="dummy();
            return false">
        <div class="form-group">
            <label for="varchar">Student Code</label>
            <div class="row">
                <div class="col-md-4">

                      <input type="text" class="form-control" name="studentcode" id="studentcode" placeholder="Student Code" readonly />

                      <input type="text" class="form-control" name="studentname" id="studentname" placeholder="Name " readonly />

                </div>

                <div class="col-md-2">
                  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">. . .</button>
                </div>
            </div>
        </div>
<table width="446" border="1">
  <tr>
    <th scope="row">Student Code</th>
    <td><strong>Product Code</strong></td>
    <td><strong>Product Name</strong></td>
    <td><strong>QTY</strong></td>
  </tr>
  <tr>
    <th scope="row"><label for="studentcode"></label>
      <input type="text" name="student" id="student"></th>
    <td><label for="bookcode"></label>
      <input type="text" name="bookcode" id="bookcode"></td>
    <td><label for="bookname"></label>
      <input type="text" name="bookname" id="bookname"></td>
    <td><label for="qty"></label>
      <input type="text" name="qty" id="qty"></td>
  </tr>
</table>


              <input type="submit" value="Save" class="btn btn-primary" />

        </form>

                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" style="width:800px">
                <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" id="myModalLabel">Lookup Student</h4>
                    </div>
                    <div class="modal-body">
                        <table id="lookup" class="table table-bordered table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>Student Code</th>
                                    <th>Student Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php

                                $con = mysqli_connect('localhost', 'root', '', 'obat');
                                $sql = mysqli_query($con,'select * from student p inner join books b on p.studentcode=b.studentcode');
                                while ($r = mysqli_fetch_array($sql)) {
                                    ?>
                                    <tr class="pilih" data="<?php echo $r['studentcode']; ?>", name="<?php echo $r['studentname'] ?>", code="<?php echo $r['bookcode'] ?>", book="<?php echo $r['bookname'] ?>">
                                        <td><?php echo $r['studentcode']; ?></td>
                                        <td><?php echo $r['studentname']; ?></td>
                                    </tr>
                                    <?php
                                }
                                ?>
                            </tbody>
                        </table>  
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
        <script src="datatables/jquery.dataTables.js"></script>
        <script src="datatables/dataTables.bootstrap.js"></script>
        <script type="text/javascript">


            $(document).on('click', '.pilih', function (e) {
                document.getElementById("studentcode").value = $(this).attr('data');
                document.getElementById("studentname").value = $(this).attr('name');
                document.getElementById("student").value = $(this).attr('data');
                document.getElementById("bookcode").value = $(this).attr('code');
                document.getElementById("bookname").value = $(this).attr('book');
                $('#myModal').modal('hide');
            });


            $(function () {
                $("#lookup").dataTable();
            });

        </script>

当我单击一个名称时，它会将数据发送到主窗体。代码成功向主窗体发送数据，但是对于 books 表，只发送了 1 行数据

1. 如何根据学生姓名(代码)从图书表中检索所有数据？

2. 我想在书籍表上添加一个文本框以手动填充它并将其保存到另一个表。我该如何做到这一点？

Answer 1

基于您的 2 个 SQL 表和 SQL 查询:

select * from student p inner join books b on p.studentcode=b.studentcode;

这只会从 student 表中提取内容，因为没有与 p.studentcode 值匹配的 b.studentcode 字段。

B01 != S01
B02 != S02

要解决此问题，您需要确保两列以某种方式对齐。更改其中一个或另一个的值，以便:

B01 == B01
B02 == B02

或者:

S01 == S01
S02 == S02

这将返回一个记录集，例如:

S01  Michael Jordan  B001  PHP
S01  Michael Jordan  B002  SQL
S02  Patric Ewing    B003  C#
S02  Patric Ewing    B004  Java

这假设了一些事情，比如您想让“S”代表学生，而 003 应该是 B003。我还建议更具体的 SQL 查询:

select p.studentCode, p.studentName, b.bookCode, b.bookName from student p inner join books b on p.studentCode=b.studentCode;

在您的 jQuery 中，我建议使用 data 属性而不是您选择的属性，以避免混淆并制作更可移植的代码。例如，请看这里:

https://jsfiddle.net/Twisty/43fLLc4c/3/

HTML 代码段

<tr class="pilih" data-sc="S01" data-sn="Michael Jordan" data-bc="B001" data-bn="PHP">
  <td>S01</td>
  <td>Michael Jordan</td>
</tr>
<tr class="pilih" data-sc="S01" data-sn="Michael Jordan" data-bc="B002" data-bn="SQL">
  <td>S01</td>
  <td>Michael Jordan</td>
</tr>
<tr class="pilih" data-sc="S02" data-sn="Patric Ewing" data-bc="B003" data-bn="C#">
  <td>S02</td>
  <td>Patric Ewing</td>
</tr>
<tr class="pilih" data-sc="S02" data-sn="Patric Ewing" data-sc="B004" data-bn="Java">
  <td>S02</td>
  <td>Patric Ewing</td>
</tr>

JavaScript

$(function() {
  $(".pilih").on("click", function(e) {
    $("#studentcode").val($(this).data("sc"));
    $("#studentname").val($(this).data("sn"));
    $("#student").val($(this).data("sn"));
    $("#bookcode").val($(this).data("bc"));
    $("#bookname").val($(this).data("bn"));
    $("#myModal").modal("hide");
  });
  $("#lookup").dataTable();
});

希望有帮助。