![](/img/trans.png)
[英]Click antd Table Row edit button and display row values in antd Input on a different component
[英]Display data row values of table to textbox when button edit click and save it to db
我有一個表,該表的數據庫中有數據值
<?php
try {
$pdo = new PDO('mysql:host=localhost:3306;dbname=insulation;', 'root', 'admin');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $pdo->prepare(" SELECT * from tbl_assessment WHERE employeeName = :employeeName");
$flag = $stmt->execute();
if (!$flag) {
$info = $stmt->errorInfo();
exit($info[2]);
}
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
@$tbody1.= '<tr>';
$tbody1.= '<input type="hidden" id="id' . $row["id"] . '" value="' . $row["id"] . '"/> ';
$tbody1.= '<input type="hidden" id="emp_name' . $row["id"] . '" value="' . $_SESSION['emp_name'] . '"/> ';
$tbody1.= '<input type="hidden" id="teamCode' . $row["id"] . '" value="' . $_SESSION['teamCode'] . '"/> ';
$tbody1.= '<input type="hidden" id="sectionCode' . $row["id"] . '" value="' . $_SESSION['sectionCode'] . '"/> ';
$tbody1.= '<input type="hidden" id="sample"/>';
$tbody1.= '<section="editable" contenteditable="false">';
//$tbody1 .='<td style="height:30px" id="id" class="id" nowrap >'.$row["id"].'</td>';
$tbody1.= '<td style="height:30px;font-weight:bold;" id="date" class="date" >' . $row["date"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="staff' . $row["id"] . '">' . $row["staffName"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="findings' . $row["id"] . '">' . $row["findings"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="action' . $row["id"] . '">' . $row["action"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="accomplished' . $row["id"] . '">' . $row["date_accomplished"] . '</td>';
@$tbody1.= '</section>';
$tbody1.= '<td><button class="btn btn-warning px-3" id="btnEdit" style="color:black;font-weight:bold;" title="Edit"><i class="fas fa-edit" aria-hidden="true"></i></button><button class="btn btn-danger px-3" id="btnDelete" style="color:black;font-weight:bold;" title="Delete"><i class="fas fa-trash" aria-hidden="true"></i></button></td>';
@$tbody1.= '</tr>';
}
}
catch(PDOException $e) {
echo $e->getMessage();
$pdo = null;
}
?>
為用戶在表中添加數據,我有一個帶有文本框的表單,單擊按鈕保存后將保存到數據庫:
<div class="container-fluid" style="background-color:grey;">
<form action="update_assesment.php" method="post">
<center>
<input type="hidden" value="<?php echo $_SESSION['emp_name']; ?>" id="emp_name"></input>
<input type="hidden" value="<?php echo $_SESSION['teamCode'];?>" id="teamCode" />
<input class="" placeholder="DATE" id="startDate" type="date" style="margin-left:20px;margin-right:20px;font-size:19px;" />
<input class="" placeholder="Staff/s name" id="staffName" type="text" style="margin-left:20px;margin-right:20px;font-size:19px;" autofocus/>
<input id="findings" style="margin-left:20px;margin-right:20px;font-size:19px;" placeholder="Findings" class=""></input>
<input placeholder="Action taken" id="actionTaken" class="" style="margin-left:20px;margin-right:20px;font-size:19px;"></input>
<input type="date" id="dateAccomplished" class="" style="margin-left:20px;margin-right:20px;font-size:19px;"></input>
<button type="" class="btn btn-info" id="btnAdd"><i class="fas fa-plus" aria-hidden="true"></i> ADD</button>
</center>
</form>
</div>
現在,您可以在我的表格中看到它具有一個EDIT按鈕。 單擊按鈕編輯時,我想在文本框中顯示數據行值,以在其上編輯值。 另外,按鈕保存將顯示在表單中,以將更改保存在文本框中。
我知道如何保存按鈕的ajax,我唯一不知道的是如何在表到文本框中顯示數據值。
提前致謝。
編輯:我試圖獲取表行的值,並在單擊btnEdit時對其進行控制台:
$(document).on('click','#btnEdit',function(){
var $row = $(this).closest("tr"); // Find the row
var $tds = $row.find("td");
$.each($tds, function() {
console.log($(this).text());
});
});
我如何在文本框中顯示此值以進行更新。
請注意,我將name屬性添加到每個輸入標簽。 如果沒有name屬性,Submit將不會發送值。
PHP代碼創建數據表:
<?php
try {
$pdo = new PDO('mysql:host=localhost:3306;dbname=insulation;', 'root', 'admin');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $pdo->prepare(" SELECT * from tbl_assessment WHERE employeeName = :employeeName");
$flag = $stmt->execute();
if (!$flag) {
$info = $stmt->errorInfo();
exit($info[2]);
}
$rownum = 0;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
@$tbody1.= '<tr>';
// Need to know the row num to pass via ajax so we know which row to update on ajax return.
$tbody1.= '<input type="hidden" id="rownum' . $rownum . '" name="rownum' . $rownum . '" value="' . $rownum . '"/> ';
$tbody1.= '<input type="hidden" id="id' . $rownum . '" name="id' . $rownum . '" value="' . $row['id'] . '"/> ';
$tbody1.= '<input type="hidden" id="emp_name' . $rownum . '" name="emp_name' . $rownum . '" value="' . $_SESSION['emp_name'] . '"/> ';
$tbody1.= '<input type="hidden" id="teamCode' . $rownum . '" name="teamCode' . $rownum . '" value="' . $_SESSION['teamCode'] . '"/> ';
$tbody1.= '<input type="hidden" id="sectionCode' . $rownum . '" name="sectionCode' . $rownum . '" value="' . $_SESSION['sectionCode'] . '"/> ';
$tbody1.= '<input type="hidden" id="sample' . $rownum . '" name="sample' . $rownum . '" value="" />';
$tbody1.= '<section="editable" contenteditable="false">';
//$tbody1 .='<td style="height:30px" id="id" class="id" nowrap >'.$row["id"].'</td>';
$tbody1.= '<td style="height:30px;font-weight:bold;" id="date' . $rownum . '" class="date" >' . $row["date"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="staff' . $rownum . '">' . $row["staffName"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="findings' . $rownum . '">' . $row["findings"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="action' . $rownum . '">' . $row["action"] . '</td>';
$tbody1.= '<td style="height:30px" contenteditable="false" id="accomplished' . $rownum . '">' . $row["date_accomplished"] . '</td>';
@$tbody1.= '</section>';
$tbody1.= '<td>';
$tbody1.= '<button class="btn btn-warning px-3" id="btnEdit' . $rownum . '" style="color:black;font-weight:bold;" title="Edit">';
$tbody1.= '<i class="fas fa-edit" aria-hidden="true"></i></button>';
$tbody1.= '<button class="btn btn-danger px-3" id="btnDelete' . $rownum . '" style="color:black;font-weight:bold;" title="Delete">';
$tbody1.= '<i class="fas fa-trash" aria-hidden="true"></i></button>';
$tbody1.= '</td>';
@$tbody1.= '</tr>';
$rownum++;
}
}
catch(PDOException $e) {
echo $e->getMessage();
$pdo = null;
}
?>
PHP代碼生成模式彈出窗口:
<div class="container-fluid" style="background-color:grey;" id='modal_1'>
<form action="update_assesment.php" method="post">
<center>
<input type="hidden" value="<?php echo $_SESSION['emp_name']; ?>" id="emp_name" name="emp_name" />
<input type="hidden" value="<?php echo $_SESSION['teamCode'];?>" id="teamCode" name="teamCode" />
<input class="" placeholder="DATE" id="startDate" name="startDate" type="date" style="margin-left:20px;margin-right:20px;font-size:19px;" />
<input class="" placeholder="Staff/s name" id="staffName" name="staffName" type="text" style="margin-left:20px;margin-right:20px;font-size:19px;" autofocus/>
<input id="findings" name="findings" style="margin-left:20px;margin-right:20px;font-size:19px;" placeholder="Findings" class="" />
<input placeholder="Action taken" id="actionTaken" name="actionTaken" class="" style="margin-left:20px;margin-right:20px;font-size:19px;" />
<input type="date" id="dateAccomplished" name="dateAccomplished" class="" style="margin-left:20px;margin-right:20px;font-size:19px;" />
<button type="" class="btn btn-info" id="btnAdd"><i class="fas fa-plus" aria-hidden="true"></i> ADD</button>
</center>
</form>
</div>
處理每行編輯按鈕的Javascript:
$(document).on('click','.btnEdit',function(){
var $row = $(this).closest("tr"); // Find the row
var $tds = $row.find("td");
$.each($tds, function() {
console.log($(this).text());
});
// Fill in edit for fields
// Open modal form
$('#modal_1').style('display','block');
});
// Add Javascript to handle add/save button on modal form.
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.