具有excel功能的JQuery项目？

时间：2015-05-19 16:43:46

标签： jquery

我有两个项目有点类似，一个需要具有类似功能。

其中一个基本上是table，产品为select，产品价格，您想要的产品数量（5,10，无论数量多少）。和产品的总价格。这样的多行。并在最后计算税收。

以下代码也位于fiddle。我通过Google找到的代码。它有点不完整，因为我一直磕磕绊绊地看不到我对JQuery的了解。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JSfiddle</title>

    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
tr, th, td {
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
}

table {
    margin: 0px auto;
    text-align: left;
}

.btw, .aantal {
    text-align: center;
}

.aantal input {
    width: 45px;
    text-align: center;
}

.totaal {
    text-align: center;
}

td {
    max-width: 450px;
    white-space: normal;
    word-wrap: break-word;
}
</style>

<script>

$(document).ready(function(){
    $("tr:nth-child(odd)").css("background-color", "#EEEEEE");
    $("tr:nth-child(even)").css("background-color", "#F9F9F9");  
});

      $(function(){
        $('input[name=aantal]').change(function(){
            $('#select').text($(this).val());
        });
        $('#element_1').bind('keydown keyup keypress', function(){
            $('#advertiserNameDisplay').html($(this).val());
        });
        $('#element_2').bind('keydown keyup keypress', function(){
            $('#adImageDisplay').text($(this).val());
        });
        $('#element_3').bind('keydown keyup keypress', calcPrice);
        function calcPrice(){
            var months = parseInt($('#element_3').val());
            if (!isNaN(months)){
                var rate = 1;
                if (months >= 1 && months < 3){
                    rate = 199;
                }else if (months >= 3 && months < 6){
                    rate = 175;
                }else{
                    rate = 150;
                }   
                var price = rate * months;
                $('#rate').text(rate);
                $('#months').text(months);
                $('#total').text(price);
            }else{
                $('#months').text('-');
            }
        }
        calcPrice();
      });

</script>

</head>
<body>


  <table>
  <tr>
    <th>article</th>
    <th>Description</th>
    <th>tax</th>
    <th>price €</th>
    <th>amount</th>
    <th>total price</th>
  </tr>
  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">

        <select name="products">
          <option value="One">Product One</option>
          <option value="Two">Product Two</option>
          <option value="Three">Product Three</option>
          <option value="Four">Product Four</option>
          <option value="Five">Product Five</option>
        </select>

    </td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" min="1" max="5" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>
  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td class="article">XXXXX</td>
    <td class="Description">A Product</td>
    <td class="tax">6</td>
    <td class="price">€ 4.0</td>
    <td class="amount"><input name="amount" value="" type="number"></td>
    <td class="total">€ 0.00</td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>amount</td>
    <td>0</td>
    <td></td>
  </tr>

  <tr>
    <td>Different delivery address:</td>
    <td>A adres</td>
    <td></td>
    <td>Subtotal</td>
    <td>0</td>
    <td></td>
  </tr>

  <tr>
    <td></td>
    <td>
        <b>128 packages per pallet</b>
    </td>
    <td></td>
    <td>extra cost*:</td>
    <td>0</td>
    <td></td>
  </tr>

  <tr style="border: 0px none; ">
    <td style="border: 0px none;">payment Bank</td>
    <td>payment  10%</td>
    <td></td>
    <td>tax 6%</td>
    <td>0</td>
    <td></td>
  </tr>

  <tr style="border: 0px none; ">
    <td style="border: 0px none;"></td>
    <td>AFTER PAYMENT  90%</td>
    <td></td>
    <td>total</td>
    <td><span id="select">x</span></td>
    <td></td>
  </tr>

  <tr style="border: 0px none; ">
    <td></td>
    <td></td>
    <td></td>
    <td>payment 10%</td>
    <td>0</td>
    <td></td>
  </tr>

  <tr>
    <td>extra cost</td>
    <td></td>
    <td></td>
    <td>AFTER PAYMENT 90%</td>
    <td>0</td>
    <td></td>
  </tr>

  <tr>
    <td>comments</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>0</td>
    <td></td>
  </tr>


</tbody></table>








</body>
</html>

正如您可以看到它像xls文件一样sum。但是，我不知道该怎么做。在进行计算时，我的JQuery并不是那么好。

非常感谢任何帮助！

0 个答案:

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