|
 |
| |
กรอกข้อมูลรอบสอง แล้วกดเพิ่มแถว เสร็จ enter ข้อมูลต้องโชว์แถวสอง แต่ข้อมูลแถวสองไปทับข้อมูลแถวแรกค่ะ |
| |
 |
|
|
 |
 |
|
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
</head>
<body>
<nav class="navbar navbar-light bg-light shadow-sm">
<h5 class="navbar-brand">
<img src="image/1.jpg" width="80" height="60" alt="" loading="lazy">
System Of Air WayBill
</h5>
</nav>
<form class="container" method="GET" action="">
<div class="form-row" style="margin-top: 50px;">
<div class="col-4 form-group">
<label for="piecesRcp">No. of Pieces RCP</label>
<input class="form-control" id="piecesRcp" name="piecesRcp">
</div>
<div class="col-4 form-group">
<label for="width">width</label>
<input class="form-control" id="width" name="width">
</div>
<div class="col-4 form-group">
<label for="length">length</label>
<input class="form-control" id="length" name="length">
</div>
<div class="col-4 form-group">
<label for="high">high</label>
<input class="form-control" id="high" name="high">
</div>
<div class="col-4 form-group">
<label for="pcs">pcs</label>
<input class="form-control" id="pcs" name="pcs">
</div>
<div class="col-4 form-group">
<label for="quantity">quantity</label>
<input class="form-control" id="quantity" name="quantity">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger col-3"><a href="AirWayBillForm2.php" style="color: white;">Enter</a></button>
</div>
</form>
<br/>
<?php
include 'DB_ConPro9.php';
if(empty($_GET["piecesRcp"])){
//echo "กรุณากรอกฟอร์มAir WayBill Form";
exit();
} else {
$piecesRcp = $_GET["piecesRcp"];
}
$width = $_GET["width"];
$length = $_GET["length"];
$high = $_GET["high"];
$pcs = $_GET["pcs"];
$quantity = $_GET["quantity"];
$ShowwlhCalculate = "($width*$length*$high)/6000";
$showresult = ($width*$length*$high)/6000;
$showPcs = $pcs;
$showQuantity = $quantity;
$showTotalWeight = $showresult*$showPcs;
?>
<table class="table table-striped container" id="myTbl">
<tr>
<th>showCalculate</th>
<th>result</th>
<th>showPcs</th>
<th>showQuantity</th>
<th>showTotalWeight</th>
<th>Add delete</th>
</tr>
<tr id="firstTr">
<td><input value="<?php echo $ShowwlhCalculate ?>"/></td>
<td><input value="<?php echo $showresult ?>"/></td>
<td><input value="<?php echo $showPcs ?>"/></td>
<td><input value="<?php echo $showQuantity ?>"/></td>
<td><input value="<?php echo $showTotalWeight ?>"/></td>
<td height="25" bgcolor="#FFFFFF">
<button class="addRow" type="button">+</button>
<button class="removeRow" type="button">-</button>
</td>
</tr>
</table>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
var num_clone = 0; // กำหนดค่า key สำหรับนับเพิ่ม กรณี้ใช้กับ checkbox ลแะ radio แบบ array
$(".addRow").on("click",function(){
num_clone++;
// ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
// การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
// รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
$("#firstTr:eq(0)").clone(true)
.find("input").val("").end() // ล้างค่า input
.appendTo($("#myTbl"));
});
$(".removeRow").on("click",function(){
var indexThis = $(".removeRow").index($(this)); // หา key รายการที่จะลบ
// // ส่วนสำหรับการลบ
if($("#myTbl tr").length>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
$("#myTbl tr:eq("+indexThis+")").remove(); // ลบรายการของแถวที่จะลบ
}else{
// เหลือ 1 รายการลบไม่ได้
alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
}
});
});
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
</body>
</html>
|
 |
 |
 |
 |
| Date :
2020-12-23 22:49:47 |
By :
gangger01 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
1. ในอีเวนต์คลิกของ $(".addRow") ต้องใส่ id ให้ row ใหม่ด้วย
2. ใช้ POST method ในการส่งข้อมูล
3. ตาราง myTbl ถ้าในข้อ 1 มีการ assign value แล้ว ก็จะเกิด dynamic flow แถวถัดไปก็ไม่ต้องทำอะไรอีก แต่ถ้าไม่มีการ assign จะต้องสร้างลูปในการแสดงผลของตาราง เพราะที่มีอยู่มีแค่ 2 rows คือ head กับ firstTr
ถ้าคุณเขียนเองและมีพื้นฐานของ web apps concepts คุณจะเข้าใจจุดที่ผมชี้และสามารถประยุกต์เพื่อแก้ปัญหาได้ แต่ถ้ามาแนวครูพักลักจำหรือลอกใครมา คุณอาจจะไม่เข้าใจเลย
แต่ยังไงถ้าสงสัยตรงไหนถามได้ทุกเรื่อง เว้นแต่เรื่องเงิน 
|
| |
|
|
| |
| Date :
2020-12-24 10:33:14 |
By :
ล่องหน |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
