如何動態添加行 - jQuery與Ajax的PHP組合？

這是我的表格結構。 enter image description here 如何動態添加行 - jQuery與Ajax的PHP組合？

這是我的輸出。 enter image description here

這裏是我的代碼：

<table width="100%" id="controltable" border="1"> 
    <tr> 
    <th> 
     Product Name 
    </th> 

    <th> 
     Product Price 
    </th> 

    <th > 
     Quantity 
    </th> 

    <th > 
     Calculate Price 
    </th> 

    <th > 
     Amount 
    </th> 
</tr> 

<tr> 
    <td> 
     <?php 
      echo '<select style="padding: 5px;" id="selectprice" name="prodlist">'; 
      echo '<option value="">Select Product</option>'; 
      $sql = mysql_query("SELECT * FROM prod_list"); 
      while($row = mysql_fetch_array($sql)){ 
       $get_prod = $row['prod_name']; 
       echo '<option value='.$get_prod.'>'.$get_prod.'</option>'; 
      } 
      echo '</select>'; 
      echo '<input type="hidden" name="price" id="hiddenconstvalue" value=""/>'; 
      ?> 

      <?php 
      echo '<input type="hidden" name="hiddenresult" id="hiddenresult" value=""/>'; 
      ?> 
    </td> 

    <td> 
     <div id="output_frame"></div> 
    </td> 

    <td> 
     <?php echo '<input type="text" style="width: 50px;" name="qnty" id="qnty" value=""/>';?> 
    </td> 

    <td> 
     <?php echo '<a href="javascript:void(0)" style="text-decoration: none;" onClick="show_price()">Calculate</a>'; ?> 
    </td> 

    <td> 
     <div id="result"></div> 

    </td> 

</tr> 

</table> 

**Javascript Code** 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#selectprice').on('change', function() { 


$.get("get_price.php?prodId="+$(this).val(), function(data) { 

    $('input[name=price]').val(data); 
    document.getElementById('output_frame').innerHTML = data; 
    }); 
}); 
    }); 


    function show_price() 
    { 

    var textValue1 = document.getElementById('hiddenconstvalue').value; 
    var textValue2 = document.getElementById('qnty').value; 

    document.getElementById('result').value = textValue1 * textValue2; 
    document.getElementById('result').innerHTML = textValue1 * textValue2; 

    }

這裏一切工作正常。如圖所示，當用戶選擇一個產品時，它會自動獲取產品的價格。我通過使用ajax實現了這一點。選擇產品後，價格將被列出並允許用戶輸入數量。所以當點擊計算價格將被扣除。現在我需要的是，如果用戶想要添加更多的文件作爲第二個產品，它應該自動附加到上表，並且應該計算整體總價。怎麼做？請幫忙。

來源

2013-10-27 razor

你似乎有一個競爭條件。如果用戶在AJAX請求的響應到達之前更改了產品並點擊了按鈕，該怎麼辦？ '＃hiddenconstvalue'元素將被更新，但'＃result'元素將根據舊數據重新計算。（不要忘記：如果這是在真實世界中運行，那麼網絡連接可能比在您的測試設置中慢得多）。爲什麼不從調用AJAX響應處理程序調用show_price？以及按鈕處理程序？那麼當用戶更換產品時甚至不需要按下按鈕。 –

哦怎麼做那個兄弟？有什麼建議麼？ – razor

但無論如何當產品改變價格也會改變，所以這不會是一個問題吧？ – razor

假設你的Ajax調用返回的HTML錶行數據，你可以做以下

jQuery('#myTable tbody').append(response.html);

希望這有助於。

來源

2013-10-27 10:22:01 user13955

必須有一個按鈕。所以如果用戶點擊它，應該在下拉列表中添加一行產品名稱。 – razor

如何動態添加行 - jQuery與Ajax的PHP組合？

回答

相關問題