javascript - 克隆 JSP 表中的一行，该行具有来自 MYSQL DB 的下拉列表，并显示与在每个相应行的下拉列表中选择的选项相关的数据（来自 DB）
问题描述
ISSUE: 我正在尝试在 JSP 中生成发票。我从下拉列表中选择项目名称的值。下拉值来自数据库，在更改选择标签时，我想显示与数据库中该项目名称相关的值（项目价格、HSN 代码、税、项目描述等）。这适用于表中的第一行但是当我们添加新行（通过克隆行）时，我们无法执行更改功能，因此不会显示相关数据。
我自己尝试了以下代码。但无法得到想要的结果。
http://jsfiddle.net/leftstick/DVEXG/
http://www.iamrohit.in/add-remove-table-rows-dynamically/
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-append-and-remove-table-row-dynamically
http://jsfiddle.net/HjZkB/2/
http://jsfiddle.net/Dz24f/
https://youtu.be/KnKMGCSPj3Y
https://www.youtube.com/watch?v=FVSfp8yT8lA&feature=youtu.be
我在下面的代码中添加了数据库连接，但没有给我想要的结果。
<%@ page import = "java.sql.*"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//$(function(){
$(document).ready(function () {
var j=1;
$("#table-data").on('click', 'input.addButton', function() {
var $tr = $(this).closest('tr');
var allTrs = $tr.closest('table').find('tr');
var lastTr = allTrs[allTrs.length-1];
var $clone = $(lastTr).clone();
$clone.find('td').each(function(){
var el = $(this).find(':first-child');
var r1= $(this).find(':first');
var idr= r1.attr('id') || null;
var id = el.attr('id') || null;
if(id) {
var i = id.substr(id.length-1);
var prefix = id.substr(0, (id.length-1));
el.attr('id', prefix+(+i+1));
el.attr('name', prefix+(+i+1));
}
});
$clone.find('input:text').val('');
$tr.closest('table').append($clone);
});
//var i=1;
$("#table-data").on('change', 'select', function(){
var value = $(this).val();
//var row1 = $(this).closest('table').find(' tbody tr:eq(0)').attr('id'); alert(row1);
var rid=$(this).closest('tr').attr("id"); alert(rid);
//var i=1;
$(this).closest('tr').find('input:text').each(function(){
$.get("myinvoice.jsp",{q:value},function(data){
//rid.val(data);
//$("#javaquery'"+i+"'").html(data);
//rid++;
$("#javaquery1").html(data);
$("#table-data option[value='"+value+"']").prop('selected', true);
});
}); //each
}); //select change
}); // ready function
//});
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<thead>
<tr>
<td>SelectOne</td>
<td>TextBox</td>
<td>TextBox</td>
<td>Add</td>
</tr>
</thead>
<tbody>
<tr id="javaquery1">
<td>
<%
String desc = "";
String price= "";
// String q =request.getParameter("q"); System.out.println("q = "+q);
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","root1216");
Statement smt = con.createStatement(); //Create Statement to inte000ract
ResultSet r = smt.executeQuery("select item_name from item"); %>
<select name="Id.0" class="dropdn" id="Id.0" ><option value="">--Select--</option>
<%
while(r.next())
{%>
<option value="<%=r.getString("item_name")%>"> <%=r.getString("item_name")%> </option>
<% } %>
</select>
<br>
<%
Statement s=con.createStatement();
String q =request.getParameter("q"); System.out.println("q = "+q);
ResultSet r1=s.executeQuery("select * from item where(item_name='"+q+"');");
while (r1.next()) {
desc = r1.getString("item_description");
price=r1.getString("item_price"); System.out.println("price = "+price);
}
%>
</td>
<td><input type="text" id="Integer1.0" name="Integer1.0" value='<%= price %>'/></td>
<td><input type="text" id="Integer2.0" name="Integer2.0" value='<%= desc %>'/></td>
<td><input type="button" class="addButton" value="Add" /></td>
</tr>
</tbody>
<%
con.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
</table>
</body>
</html>
