0

これが私のテーブル構造です。ここに画像の説明を入力

これが私の出力です。 ここに画像の説明を入力

これが私のコードです：

<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;

    }

ここでは、すべてが正常に機能しています。ユーザーが図に示すように strepsils などの製品を選択すると、製品の価格が自動的に取得されます。これを ajax を使って実装しました。製品を選択すると、価格が表示され、ユーザーは数量を入力できます。そのため、[計算] をクリックすると、価格が計算されます。今私が必要としているのは、ユーザーが 2 番目の製品を vinly と言うフィールドをさらに追加したい場合、上記のテーブルに自動的に追加され、全体の総価格が計算されることです。どうやってするか？助けてください。

4

1 に答える 1

0

Ajax 呼び出しが HTML テーブルの行データを返すと仮定すると、次のことができます。

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

お役に立てれば。

于 2013-10-27T10:22:01.620 に答える