Question

我有一个想法：

Requisition

搜索文本框会执行自动填充操作，它会在textbox 1，textbox 2，textbox 3和用户上显示结果将在textbox 4上输入他们想要的数量。
在搜索项目后，用户必须按下ADD按钮，页面将自动生成一行而不重新加载页面。因此，当用户选择他们想要的第二个项目时，该页面将在第一个项目下面生成第二行。
要完成此过程，用户必须按SUBMIT按钮，然后数据才会插入数据库。

我成功完成了自动填充功能：

<script>
      $(function() {
        function log( message ) {
          $( "<div>" ).text( message ).prependTo( "#log" );
          $( "#log" ).scrollTop( 0 );
        }

        $( "#ItemName" ).autocomplete({
          source: "requisition_search.php",
          minLength: 1,
          select: function( event, ui ) 
              {
                  $('#ItmId').val(ui.item.id);
                  $('#ItmName').val(ui.item.value);
                  $('#ItmUOM').val(ui.item.uom);
                  $('#ItmQty').val(ui.item.qty);
              }

        });
      });
    </script>

但我不知道如何做动态行。我知道有些使用JS或jQuery，但我对两个人都很新。我发现了一些生成代码并在动态行上实现自动完成的示例。但是我想要生成after用户输入数据并点击按钮ADD

Answer 1

尝试以下内容。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>jQuery Dynamic Rows</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){

        $("#add").on("click",function(){

          var rowcount = $("#rowcount").val();
          var row = '<tr id="'+rowcount+'"><td>'+$("#itemid").val()+'</td><td>'+$("#itemname").val()+'</td><td>'+$("#uom").val()+'</td><td>'+$("#quantity").val()+'</td></tr>'; 

           rowcount = parseInt(rowcount)+1;

           $("#rowcount").val(rowcount);
           $("#dataTab").append(row);
           $("#dataTab").show();
           $("#submit").show();            

        });

    });

</script>
    </head>

    <body>


     <form name="jqtest" action="#">

       Item ID : <input type="text" name="itemid" id="itemid"/><br/><br/>
       Item name : <input type="text" name="itemname" id="itemname"/><br/><br/>
       UOM : <input type="text" name="uom" id="uom"/><br/><br/>
       Quantity : <input type="text" name="quantity" id="quantity"/><br/><br/>

       <p> <input type="reset" name="reset" id="reset" value="RESET"/>&nbsp;&nbsp;<input type="button" name="add" id="add" value="ADD"/> </p>
        <input type="hidden" name="rowcount" id="rowcount" value="1"/>
     </form>

     <table id="dataTab" style="display:none;" border="1">

      <tr>
        <th>Item ID</th>
        <th>Item name</th>
        <th>UOM</th>
        <th>Quantity</th>
      </tr>

     </table>

    <p> <input style="display:none;" type="button" name="submit" id="submit" value="submit"/> </p>

    </body>

    </html>

jQuery自动完成远程数据源和动态行

1 个答案: