嘿,我把这张表放在表格中
<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, '') + '';
现在我想在数据库中上传所有这些信息,我正在尝试做这样的事情,我将表信息传递给帖子,我使用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
}
?>
答案 0 :(得分:0)
您可以使用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
库载满了。