从动态填充表中处理新内容的简便方法？

Question

我已经使用了几个星期而且我找不到任何＆＃34;轻松/快速＆＃34;这种世俗实施的方式。我只知道只有php和html（目前），但我终于得到了我想要的东西使用一些javascript而不知道它的深度，我结束了一个丑陋的几百代码。但是现在我更加头脑发热，我想知道是否有一些简单的方法可以做到这一点，并改进我以前的工作：

我有一个带有Table1的数据库，其中包含n项和表2，我想显示表1中的价格然后能够在用户端输入数量，并在所有项目填充时自动显示行小计，然后在用户输入数据时显示Grandtotal。然后读取所有行并将新信息（数量和小计）插入到DB的Table2中。

这样的东西，但有n行 （黄色= DB数据，蓝色=用户输入，绿色=动态字段）

然后将所有这些n行放入DB中 一个简单的方法做任何头灯？（即使它包括Jquery或JS，我不再害怕他们） （我不会发布我的代码，因为是废话，基本上我结束了所有可行的行，然后如果小计超过0则将它们插入Table2） 提前谢谢！

Answer 1

如果希望这有效

		$(document).ready(function() {
		  $('#mytable tr').each(function(i, elem) {
		    var sub = $(elem).find('.sub');

		    // Update subtotal after the price
		    $(this).find('.price').change(function() {
		      var quant = $(this).parent().next().children('.quant');

		      sub.val($(this).val() * quant.val());

		      updateGrand();
		    });

		    // Update subtotal after the quantity
		    $(this).find('.quant').change(function() {
		      var price = $(this).parent().prev().children('.price');

		      sub.val($(this).val() * price.val());

		      updateGrand();
		    });
		  });

		  // Function for updating the grand total
		  function updateGrand() {
		    var sum = 0;

		    $('#mytable .sub').each(function() {
		      sum += parseInt($(this).val());
		    });

		    $('#grand span').text(sum);
		  }

		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action "/someUrl" method="post">
  <table id="mytable">
    <tr>
      <th>Price</th>
      <th>Quantity</th>
      <th>Subtotal</th>
    </tr>
    <tr>
      <td>
        <input type="number" class="price" name="price[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="quant" name="quant[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="sub" name="sub[]" value="0" readonly />
      </td>
    </tr>
    <tr>
      <td>
        <input type="number" class="price" name="price[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="quant" name="quant[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="sub" name="sub[]" value="0" readonly />
      </td>
    </tr>
    <tr>
      <td>
        <input type="number" class="price" name="price[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="quant" name="quant[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="sub" name="sub[]" value="0" readonly />
      </td>
    </tr>
    <tr>
      <td>
        <input type="number" class="price" name="price[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="quant" name="quant[]" value="0" min="1" />
      </td>
      <td>
        <input type="number" class="sub" name="sub[]" value="0" readonly />
      </td>
    </tr>
    <tr>
      <td></td>
      <td>Grand total:</td>
      <td id="grand"><span>0</span>
      </td>
    </tr>
  </table>
  <input type="submit" name="submit" value="Submit" />
</form>

PHP代码

<?php
// sample config
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "sample";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn -> connect_error) {
    die("Connection failed: " . $conn -> connect_error);
}

if (isset($_POST['submit'])) {
    $price = $_POST['price'];
    $quant = $_POST['quant'];
    $sub = $_POST['sub'];

    foreach ($price as $key => $p) {
        $quantdb = $quant[$key];
        $subdb = $sub[$key];

        $sql = "INSERT INTO table2 (price, quantity, subtotal) VALUES ('$p', '$quantdb', '$subdb')";

        $conn->query($sql);
    }
}
?>