|
 |
| |
ผมจะเพิ่มข้อมูลจาก Dynamic table ไปยัง ฐานข้อมูล mysql โดยใช้ php ได้อย่างไรครับ |
| |
 |
|
|
 |
 |
|
คือว่าผมมี code ตารางแบบ Dynamic ชุดนึงครับ แต่ว่าใชเ Javascript ครับ
ผมขอคำแนะนำในการเพิ่มข้อมูลเข้าไปในฐานข้อมูลจาก Dynamic Table ได้อย่างไรหรอครับ
ผมมีข้อมูลในตารางที่สามารถเพิ่ม ลบ แก้ไข ได้ ไปเลื่อยๆ!!
ผมจะเอาลงฐานข้อมูล mysql หลังจากกด submit ได้อย่างไรหรอครับ
Code (JavaScript)
<!DOCTYPE html>
<html>
<head>
<title>Add Edit Remove HTML Table Row</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container text-center">
<div class="table table-hover">
<table id="table" class="table table-hover text-center">
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>อายุ</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>10</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>30</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>20</td>
</tr>
</table>
</div>
<div class="row text-center">
<div class="form-group row">
<div class="col-md-4">
<label> First Name :</label>
<input class="form-control text-center" type="text" name="fname" id="fname">
<label> Last Name :</label>
<input class="form-control text-center" type="text" name="lname" id="lname">
<label> Age :</label>
<input class="form-control text-center" type="number" name="age" id="age"><br><br>
<!-- //// -->
<button class="btn btn-info" onclick="addHtmlTableRow();">Add</button><!-- เรียกใช้ function addHtmlTableRow() -->
<button class="btn btn-warning" onclick="editHtmlTbleSelectedRow();">Edit</button>
<button class="btn btn-success" onclick="removeSelectedRow();">Remove</button>
</div>
</div>
</div>
</div>
<script>
var rIndex;
var table = document.getElementById("table");
// start check the empty input
function checkEmptyInput()
{
var isEmpty = false,
fname = document.getElementById("fname").value,
lname = document.getElementById("lname").value,
age = document.getElementById("age").value;
if((fname == "" && lname == "") && age == ""){
alert("ช่องชื่อ นามสกุล อายุ ห้ามว่าง!!");
isEmpty = true;
}
else if(fname === ""){
alert("First Name Connot Be Empty");
isEmpty = true;
}
else if(lname === ""){
alert("Last Name Connot Be Empty");
isEmpty = true;
}
else if(age === ""){
alert("Age Connot Be Empty");
isEmpty = true;
}
return isEmpty;
}
// end check the empty input
// start add Row
function addHtmlTableRow()
{
// get the table by id
// create a new row and cells
// get value from input text
// set the values into row cell's
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
fname = document.getElementById("fname").value,
lname = document.getElementById("lname").value,
age = document.getElementById("age").value;
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = age;
// call the function to set the event to the new row
selectedRowToInput();
}
}
// end add Row
// start display selected row data into input text
function selectedRowToInput()
{
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function(){
// get the selected row index
rIndex = this.rowIndex;
document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
};
}
}
// end display selected row data into input text
selectedRowToInput();
// start edit row
function editHtmlTbleSelectedRow()
{
var fname = document.getElementById("fname").value,
lname = document.getElementById("lname").value,
age = document.getElementById("age").value;
if(!checkEmptyInput()){
table.rows[rIndex].cells[0].innerHTML = fname;
table.rows[rIndex].cells[1].innerHTML = lname;
table.rows[rIndex].cells[2].innerHTML = age;
}
}
// end edit row
// start remove from rows
function removeSelectedRow()
{
table.deleteRow(rIndex);
// clear input text
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("age").value = "";
}
// end remove from rows
</script>
</body>
</html>
Tag : PHP, MySQL, Ajax, jQuery, XAMPP
|
|
|
 |
 |
 |
 |
| Date :
2018-01-10 21:47:26 |
By :
pongC |
View :
2077 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
มันอ่านผ่าน $_POST ครับ ดูตัวอย่างนี้ครับ
|
| |
|
|
| |
| Date :
2018-01-11 17:24:32 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ในฟังค์ชั่น addHtmlTableRow()
ตอน insertrow ก็ยัด input hidden type รูปแบบ array เข้าไปใน cell ด้วยครับ เช่น
cell1.innerHTML = fname+'\n <input type="hidden" name="firstName[]" value="'+fname+'">';
cell2.innerHTML = lname+'\n <input type="hidden" name="lastName[]" value="'+lname+'">';
cell3.innerHTML = age+'\n <input type="hidden" name="theAge[]" value="'+age+'">';
ส่วนในหน้าที่ action ไป ก็ทำการ query insert multi rows โดย post ที่ส่งมาจะอยู่ในรูปแบบ array ครับ
จะประมาณนี้ครับ
$fName = $_POST['firstName'];
$lName = $_POST['lastName'];
$age = $_POST['theAge'];
$Arr = array();
foreach($fName as $key => $data){
$val1 = mysql_real_escape_string($data);
$val2 = mysql_real_escape_string($lName[$key]);
$val3 = mysql_real_escape_string($age[$key]);
$Arr[] = "('".$val1."','".$val2."','".$val3."')";
}
$sql = "INSERT INTO tableName (fName, lName, age) values ";
$sql .= implode(',', $Arr);
จากนั้นนำ $sql ไป query ครับ
ไป apply เอานะครับ ผมไกด์ให้ประมาณนี้ (แทบจะ 100% แล้ว)
ปล. อย่าลืมสร้าง tag form ด้วยนะครับ
|
| |
|
|
| |
| Date :
2018-01-12 02:46:36 |
By :
tomrambo |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
