JQuery Dynamic行不能在第二行中增加值

时间：2018-01-12 10:57:14

标签： javascript jquery mysql ajax jsp

这是主JSP页面 在这个页面中，我有一个引导表。当用户按下“输入”时，动态创建表格行。 key.In当我输入产品名称时，它显示自动建议属于该字，所以这在第一行完美地工作。 但是当我按下“输入”键时键和转到第二行，我输入产品名称，它不能显示任何建议....请解决我的问题... 三江源。

<%-- 
    Document   : JSP
    Created on : Jan 12, 2018, 3:56:23 PM
    Author     : Lenovo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="Bootstrap/bootstrap.css"/>
        <link type="text/css" rel="stylesheet" href="SellSameStateCSS.css"/>
        <title>JSP Page</title>
    </head>
    <body>
                <div class="container-fluid" >
        <div class="row">
        <div class="col-sm-12">

        <div class="table-responsive  exxx">
        <table class="table-responsive table-bordered" id="POITable">
        <thead>
        <tr>
        <th>S.No</th>
        <th>Description of Goods</th>
        <th>HSN//SAC// Code..</th>
        <th>Serial No of Product</th>
        <th>Product Rate()</th>
        <th>CGST Rate %</th>
        <th>CGST Amount</th>
        <th>SGST Rate %</th>
        <th>SGST Amount</th>
        <th>Unit</th>
        <th>Qtyy</th>
        <th>Amount</th>
        <th><i class="fa fa-trash fa-2x"></i></th>

        </tr>
        </thead>

        <tbody>
        <tr>
        <td align="center">1</td>          
        <td><input type="text" class="inputs searchName"  name="pname_1" size="22" id="search1"/></td>

        <td colspan="7"><span id="spansearch1"></span><input type="hidden" name="hiddennamesearch" value="search" id="hiddensearch"/></td>

        <!--<td><input type="text" class="inputs" name="hsn_1" size="10" id="esearch1"/></td>

        <td><input type="text" class="inputs" name="serialno_1" size="10" id="serialno_1"/></td>

        <td><input type="text" class="inputs" name="rate_1" size="4" id="rate_1"/></td>

        <td><input type="text" class="inputs" name="cgstrate_1" size="5" id="cgstrate_1"/></td>

        <td><input type="text" class="inputs" name="cgstamount_1" size="5" id="cgstamount_1"/></td>

        <td><input type="text" class="inputs" name="sgstrate_1" size="5" id="cgstrate_1"/></td>

        <td><input type="text" class="inputs" name="sgstamount_1" size="5" id="sgstamount_1"/></td>-->

        <td><input type="text" class="inputs" name="unit_1" size="4" id="unit_1"/></td>

        <td colspan="2"><span id="qtyQsearch1"></span><input type="text" class="inputs lst searchQty" name="qty_1" size="2" id="Qsearch1" readonly/>
        <input type="hidden" name="qhiddennamesearch" value="Qsearch" id="Qhiddensearch"/>
        </td>

        <td align="center"><button type="button"><i class="fa fa-times"></i></button></td>
        </tr>

        </tbody>

        </table>

        <div id="autosearch1"></div>

        </div>
        </div>
        </div>


                    <script type="text/javascript" src="Bootstrap/jquery-3.1.1.min.js"></script>
                    <script type="text/javascript" src="Bootstrap/bootstrap.js"></script>
                    <script type="text/javascript" src="Ajax.js"></script>       
    </body>
</html>

这是Jquery和Ajax 

$(document).ready(function()
    {
    $('[data-toggle="tooltip"]').tooltip();   
    });


 $(document).keypress(
    function(event){
     if (event.which == '13') {
        event.preventDefault();
      }
});




var i = $('table tr').length;
var count=0;
$(document).on('keyup', '.lst', function(e) 
{
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) 
  {
    count = $('table tr').length;     

    html = '<tr>';
    html += '<td align="center">'+ i +'</td>';
    html += '<td><input type="text" class="inputs searchName"  size="22" name="pname_' + i + '" id="search'+i+'" /></td>';
    html += '<td colspan="7"><span id="spansearch'+i+'" ></span><input type="hidden" name="hiddennamesearch'+i+'" value="search'+i+'" id="hiddensearch'+i+'"/></td>';
    //
    //html += '<td><input type="text" class="inputs" size="10" name="hsn_' + i + '" id="hsn_' + i + '" /></td>';
    //html += '<td><input type="text" class="inputs" size="10" name="serialno_' + i + '" id="serialno_' + i + '" /></td>';    
    //html += '<td><input type="text" class="inputs" size="4" name="rate_' + i + '" id="rate_ ' + i + '"/></td>';
    //html += '<td><input type="text" name="cgst_rate"/></td>';    
    //html += '<td><input type="text" class="inputs" size="7" name="cgstamount_' + i + '" id="cgstamount_ ' + i + '"/></td>';
    //html += '<td><input type="text" name="cgst_rate"/></td>';
    //html += '<td><input type="text" class="inputs" size="7" name="sgstamount_' + i + '" id="sgstamount_ ' + i + '"/></td>';  

    html += '<td><input type="text" class="inputs" size="4" name="unit_' + i + '" id="unit_ ' + i + '"/></td>';

    html += '<td colspan="2"><span id="qtyQsearch'+i+'" ></span><input type="text" class="inputs lst searchQty" size="2" name="qty_' + i + '" id="Qsearch' + i + '" readonly/>\n\
            </td>';

    html += '<td align="center"><button type="button" class="removebutton"><i class="fa fa-times"></i></button></td>';

    html += '<input type="hidden"  name="count" value="'+ count +'"/>';

    html += '<div id="autosearch'+i+'"></div>';

    html += '</tr>';

    $('table').append(html);
    $(this).focus().select();
    i++;
  }
});

$(document).on('keydown', '.inputs', function(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code==13) {
    var index = $('.inputs').index(this) + 1;
    $('.inputs').eq(index).focus();
  }
});


var name;

$('.searchName').keyup(function()
    {

     var id=$(this).attr("id");
     name=$('#'+id).val();

      $.ajax({
        url:"SellSameStateAutoSuggest.jsp",
        type:"post",
        dataType:"text",
        data:{pname:name},
        cache:false,
        success:function(data) 
        {
        $('#auto'+id).html(data);
        $('#auto'+id).show();
        }  
        });

    });





function selectName(val)
{    
    var id=$('.searchName').attr("id");
    $('#'+id).val(val);
    name=val;
    var hidden=$('#hidden'+id).val();
        $.ajax({
        url:"SellSameStateAjaxDB.jsp",
        type:"post",
        dataType:"text",
        data:{name:name,hidden:hidden},
        cache:false,
        success:function(data)
        { 

         $('#span'+id).html(data);
         $('#td'+id).hide();
         $('#auto'+id).hide();
         $('#Q'+id).prop('readonly',false); 
        //$('#e'+id).val(data);
        }
        });

}
//$(document).on('change','.searchName',function()
//{
//      var id=$(this).attr("id");
//      name=$('#'+id).val();

//       var hidden=$('#hidden'+id).val();
//       var email=$('#e'+id).val();

//     $.ajax({
//        url:"SellSameStateAjaxDB.jsp",
//        type:"post",
//        dataType:"text",
//        data:{name:name,hidden:hidden},
//        cache:false,
//        success:function(data)
//        { 
//            
//         $('#span'+id).html(data);
//         $('#td'+id).hide();
//         //$('#e'+id).val(data);
//        }
//        });
//        });


$('.searchQty').change(function()
{

   var id=$(this).attr("id");
   var qty=$('#'+id).val();

   $.ajax({
      url:"SellSameStateQtyAjaxDB.jsp",
      type:"post",
      dataType:"text",
      data:{qty:qty,name:name,id:id},
      cache:false,
      success:function(data)
      {
       if(data!==null)
       {
       $('#'+id).remove(); 

       $('#qty'+id).html(data);
       }
       else
       {

       }
      }
  });
});        


    $(document).on('click','button.removebutton',function()
    {
     if(confirm("Are you sure you want to delete this?"))
     {
     $(this).closest('tr').remove();    
     }
     else
     {
     return false;    
     }




    });

这是Auto Suggest jsp文件 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java" %>
<%@page import="java.util.*" %>
<%@page import="java.sql.*" %>



    <%
    String p_name=request.getParameter("pname");

    String p_name1=null;

    if(p_name!="")
    {

    try
    {

    Class.forName("com.mysql.jdbc.Driver");
    Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/GST","root","root");
    Statement st=con.createStatement();
    ResultSet rs;


         %>     

        <ul id="country-list"> 
            <%
        rs=st.executeQuery("SELECT * FROM test1 WHERE name LIKE'"+p_name+"%'");
        while(rs.next())
        {
          p_name1=rs.getString("name");
          %>

          <li onclick="selectName('<%=p_name1%>');"><%=p_name1%></li>    

          <%

        }
        }
        catch(Exception e)
        {
        out.println(e);
        }

        }
        else
        {
         out.println("");
        }

%>
        </ul>

这是我们输入产品名称时获取产品详细信息的Ajax jsp文件 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page language="java"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>


        <%
        try
        {
          String pname=request.getParameter("name");
          String pname1=null;
          String hsn=null;
          String ser=null;
          float rate;
          float cgst_rate;
          float cgst_amount;
          float sgst_rate;
          float sgst_amount;

          String fixedBargain=null;


          Class.forName("com.mysql.jdbc.Driver");
          Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/GST","root","root");
          Statement st=con.createStatement();
          ResultSet rs,rs1;

          rs1=st.executeQuery("SELECT * FROM add_new_product WHERE p_name='"+pname+"'");
          while(rs1.next())
          {
            fixedBargain=rs1.getString("fix_bargn");
          }

          rs=st.executeQuery("SELECT * FROM test1 where name='"+pname+"'");
          while(rs.next())
          {
              pname1=rs.getString("name");

              hsn=rs.getString("hsn");
              ser=rs.getString("serial_no");
              rate=rs.getFloat("rate");
              cgst_rate=rs.getFloat("cgst_rate");
              sgst_rate=rs.getFloat("sgst_rate");

              cgst_amount=cgst_rate/100*rate;
              sgst_amount=sgst_rate/100*rate;

              if(pname.equals(pname1) && fixedBargain.equals("bargaining"))
              {
              %>


        <tr>                
              <td><input type="text" name="" size="11" value="<%=hsn%>"/></td>
              <td><input type="text" name="" size="11" value="<%=ser%>"/></td>
              <td><input type="text" name="" size="8" value="<%=rate%>"/></td>
              <td><input type="text" name="" size="7" value="<%=cgst_rate%>" readonly/></td>
              <td><input type="text" name="" size="7" value="<%=cgst_amount%>" readonly/></td>
              <td><input type="text" name="" size="7" value="<%=sgst_rate%>" readonly/></td>
              <td><input type="text" name="" size="7" value="<%=sgst_amount%>" readonly/></td>
        </tr>          
              <%
              }
            else if(pname.equals(pname1) && fixedBargain.equals("fixed"))
            {
            %>
        <tr>                
              <td><input type="text" name="" size="11" value="<%=hsn%>"/></td>
              <td><input type="text" name="" size="11" value="<%=ser%>"/></td>
              <td><input type="text" name="" size="8" value="<%=rate%>" readonly/></td>
              <td><input type="text" name="" size="7" value="<%=cgst_rate%>" readonly/></td>
              <td><input type="text" name="" size="7" value="<%=cgst_amount%>" readonly/></td>
              <td><input type="text" name="" size="7" value="<%=sgst_rate%>" readonly/></td>
              <td><input type="text" name="" size="7" value="<%=sgst_amount%>" readonly/></td>
        </tr>
            <%
            }
          }        
        }
        catch(Exception e)
        {
          out.println(e);
        }
        %>

这是CSS文件 

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 22, 2017, 4:26:49 PM
    Author     : Lenovo
*/

#country-list
{

 list-style: none;
 width: 21%;
 padding-left: 34px;
 margin-top: -1px;
 position: absolute;
 z-index: 999;
}

#country-list li
{
padding: 7px;
background: #f3fafd;
border-bottom: #bbb9b9 1px solid;
}

#country-list li:hover
{
background-color: #abe1f6;
cursor: pointer;
}

0 个答案:

没有答案
相关问题
最新问题