将表信息传递给php并将其上载到数据库。

Question

嘿，我把这张桌子放在表格里

<form  method="post">
            <table class="table table-bordered table-hover" id="factura">
              <thead>
                <tr>
                  <th>Descripción</th>
                  <th class="text-center" style="width: 100px;">Cantidad</th>
                  <th class="text-right" style="width: 120px;">Precio Unitario</th>
                  <th class="text-right" style="width: 120px;">Total</th>
                </tr>
              </thead>
              <tbody>


              </tbody>
            </table>
              <input class="btn btn-sm btn-primary pull-right" type="submit" id="save" name="saveInvoice" disabled="true" value="Guardar">
            </form>

我这样通过Javascript将项目添加到这个表中。

  var titulo = document.getElementById("newItemTitle").value;
  var descripcion = document.getElementById("newItemDescription").value;
  var cantidad = document.getElementById("newItemQuantity").value;
  var precio = document.getElementById("newItemPrice").value;

  var totalItem = precio * cantidad;

  valorTotal += totalItem;

  var precioFix = precio * 1;


  var table = document.getElementById("factura");
  var row = table.insertRow(1);
  var cell2 = row.insertCell(0);
  cell2.innerHTML = '<p class="font-w600 push-10">' + titulo +'</p><div class="text-muted" >' + descripcion + '</div>';
  var cell3 = row.insertCell(1);
  cell3.className = "text-center";
  cell3.innerHTML = '<span class="badge badge-primary">'+ cantidad +'</span>';
  var cell4 = row.insertCell(2);
  cell4.className = "text-right";

  cell4.innerHTML = '$' + formatMoney(precioFix, '') + '';
  var cell5 = row.insertCell(3);
  cell5.className = "text-right";
  cell5.innerHTML = '$' + formatMoney(totalItem, '') + '';

现在我想将所有这些信息上传到数据库中，我正在尝试这样做，将表信息传递给一个post，I使用javascript循环到每一行并将其添加到数据库中。但这不管用。有人能帮帮我吗？

<?php
if($_POST['saveInvoice']) {

  $table = $_POST['factura'];

  ?>
  <script>
  var table = <?php echo($table) ?>
  var rowLength = table.rows.length;

  for(var i=0; i<rowLength; i+=1){
  var row = table.rows[i];

  //your code goes here, looping over every row.
  //cells are accessed as easy

  console.log(row);

  }
  </script>
  <?php
}

?>

Answer 1

您可以使用jquery ajax

像下面这样更新html代码并添加jquery ajax函数：

Html代码：

<form  method="post" onsubmit="return sendTable()" id="tableForm">
    <table class="table table-bordered table-hover" id="factura">
      <thead>
        <tr>
          <th>Descripción</th>
          <th class="text-center" style="width: 100px;">Cantidad</th>
          <th class="text-right" style="width: 120px;">Precio Unitario</th>
          <th class="text-right" style="width: 120px;">Total</th>
        </tr>
      </thead>
      <tbody>


      </tbody>
    </table>
    <input class="btn btn-sm btn-primary pull-right" type="submit" id="save" name="saveInvoice" disabled="true" value="Guardar">
</form>

Ajax代码：

var sendTable = function() {
    $.ajax({
        url : "SERVER_FILE_PATH.php",
        data : {table: $('#tableForm').html()},
        type : "POST",
        dataType : "html",
        success : function(){

        }
    })
    return false;
}

在ajax函数中为url添加服务器文件路径，并在服务器上添加回显$_POST['table']以获取html，如果尚未加载，还请确保在页面上添加jquery库。