JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<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 type="number" name="amount" value="" name="quantity" min="1" max="5"></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 type="number" name="amount" value=""></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 type="number" name="amount" value=""></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 type="number" name="amount" value=""></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 type="number" name="amount" value=""></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...

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

JavaScript

$(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('-');
            }
        }
          alert($("tr:nth-child(6)").val());
          
        calcPrice();
      });