Question

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>

enter image description here

在JSP表中克隆一行，从MYSQL DB下拉并显示与每个相应行

0 个答案: