php SQL表单网格选择和计数器

Question

!http://i63.tinypic.com/zn8z6x.png
My assignment is to visualize this form into a website, with the possibilities of the form.
This is for a chicken slaughterhouse, for checking the weights. On the form you can insert a "weight range" for example 1000 grams.
Then it should be possible to select the possible weights from the grid. If its all filled in, the data should be send to the database.
For example if you selected +50, the database should register 1050 grams.
I'm not asking to make the form for me, but i AM asking if this is at least a bit possible. And if its possible, how to make a little start with the grid and counter

Thanks in advance!

Answer 1

Use simple grid-generation using table.

$(document).ready(function () {
  var cols = 10;
  var rowsMax = 100;
  var rowsMin = -100;
  var rowDiff = 20;
  var rowVal = rowsMax;
  var t = $('table');
  
  while (rowVal >= rowsMin) {
    var tr = '<tr>';
    for (var col = 0; col < cols; col++) {
      if (col == 0) {
        tr += '<td>'+rowVal+'</td>';
      }

      if (rowVal == rowsMax) {
        t.find('tfoot tr').append('<td class="col-'+col+'">0</td>');
      }
      tr += '<td><input type="radio" name="weigh['+col+']" data-col="'+col+'" value="'+rowVal+'"></td>';
    }
    tr += '</tr>';

    t.find('tbody').append(tr);
    
    rowVal -= rowDiff;
  }
  
  $('table tbody input').change(function () {
    $('tfoot .col-'+$(this).data('col')).text(parseInt($('#base').val()) + parseInt($(this).val()));
  })
});

td {
  padding: 10px;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="base" placeholder="Enter weight base."/>g

<table>
  <tbody>
  
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
    </tr>
  </tfoot>
</table>

</div>