我在使用bootstrap模式查找（jQuery模式对话框）来检索来自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> </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">×</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行数据
如何根据学生姓名（代码）从书籍表中检索所有数据？
我想在books表上添加一个文本框以手动填充它并将其保存到另一个表中。我怎么能这样做？
答案 0 :(得分：0)
基于您的2个SQL表和SQL查询：
select * from student p inner join books b on p.studentcode=b.studentcode;
这只会从student表中提取内容，因为没有b.studentcode个字段符合p.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();
});
希望有所帮助。