我有一个表格,可让td的内容可编辑,以便用户轻松输入所需的数据。
数据库中的所有行和td的值为null。当用户输入内容时它将具有价值,并且当单击按钮保存时将保存/更新
我的tbody php:
<?php
$emp_name = $_SESSION["emp_name"];
$month = $_SESSION["month"];
$REMARKS = $_SESSION[""];
$date_now = date('m');
$current_day = date('d');
$sample_var= $_SESSION["username"] ;
try {
$pdo = new PDO('mysql:host=localhost:3306;dbname=******;', '****', '*****' );
$pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$stmt = $pdo->prepare(
" SELECT * from tbl_assessment WHERE employeeName = '{$_SESSION['emp_name']}' "
);
$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" value="'.$_SESSION['id'].'"/> ';
$tbody1 .=' <input type="hidden" id="emp_name" value="'.$_SESSION['emp_name'].'"/> ';
$tbody1 .=' <input type="hidden" id="teamCode" value="'.$_SESSION['teamCode'].'"/> ';
$tbody1 .=' <input type="hidden" id="sectionCode" value="'.$_SESSION['sectionCode'].'"/> ';
$tbody1 .='<td style="height:30px" contenteditable>'.$row["date"].'</td>';
$tbody1 .='<td style="height:30px" contenteditable>'.$row["staffName"].'</td>';
$tbody1 .='<td style="height:30px" contenteditable>'.$row["findings"].'</td>';
$tbody1 .='<td style="height:30px" contenteditable>'.$row["action"].'</td>';
$tbody1 .='<td style="height:30px" contenteditable>'.$row["date_accomplished"].'</td>';
$tbody1 .='<td><button class="btn btn-warning px-2" id="btnSaveFindings" style="color:black;font-weight:bold;" title="Save"><i class="fas fa-save" aria-hidden="true"></i></button><button class="btn btn-info px-2" id="btnEdit" style="color:black;font-weight:bold;" title="Edit"><i class="fas fa-edit" aria-hidden="true"></i></button></td>';
@$tbody .='</tr>';
}
}
catch ( PDOException $e ) {
echo $e->getMessage();
$pdo = null;
}
?>
我的HTML表格:
<div id="containerDiv" style="background-color:white;border-bottom:3px solid #ff6600;margin-left:50px;margin-right:50px;margin-bottom:140px;" class="animated fadeInUp">
<div class="" style="margin-left:15px;margin-right:15px;overflow-x:auto;" ><br>
<button class="btn btn-default px-3" style="float:right;" id="btnAddRow" name="btnAddRow" title="Add New row"><i class="fas fa-plus" aria-hidden="true"></i></button>
<table class="assessment" id="assessment" width="1526px" >
<thead style="background:-moz-linear-gradient( white, gray);">
<tr>
<th colspan="6" style="font-size:20px;">ASSESSMENT/FINDINGS:</th>
</tr>
<tr> <!---FIRST TABLE ROW--->
<th>DATE</th>
<th>NAME OF THE STAFF/S</th>
<th>ASSESSMENT/FINDINGS</th>
<th>ACTION TAKEN</th>
<th>DATE ACCOMPLISHED</th>
<th>ACTION</th>
</tr>
<tbody>
<?php echo $tbody1; ?>
</tbody>
</thead>
</table><br><br>
</div>
btnSaveFindings
更新数据库中td值的功能是什么?
答案 0 :(得分:0)
一些注意事项,
<td>
元素,以便我们可以使用jQuery来获取它们,并在单击按钮时找到该行的最接近值。将行唯一标识符添加到按钮的data-*
属性,这样我们就知道要更新哪一行。<?php
$emp_name = $_SESSION["emp_name"];
$month = $_SESSION["month"];
$REMARKS = $_SESSION[""];
$date_now = date('m');
$current_day = date('d');
$sample_var = $_SESSION["username"] ;
try {
$pdo = new PDO('mysql:host=localhost:3306;dbname=******;charset=utf8mb4', '****', '*****' );
$pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$stmt = $pdo->prepare("SELECT * FROM tbl_assessment WHERE employeeName = :employeeName");
$stmt->execute(['employeeName' => $_SESSION['emp_name']]);
?>
<script>
$(".btnSaveFindings").on("click", function() {
var id = $(this).data('assessment-id'),
row = $(this).closest("tr"),
date = $(row).find('.assessment-date')[0],
staffname = $(row).find('.assessment-staffname')[0],
findings = $(row).find('.assessment-findings')[0],
action = $(row).find('.assessment-action')[0],
accomplished = $(row).find('.assessment-date-accomplished')[0];
$.ajax({
type: "POST",
url: "updateRow.php",
data: {id: id,
date: date,
staffname: staffname,
findings: findings,
action: action,
accomplished: accomplished},
success: function(data) {
var status = data.status,
message = data.message;
alert(message);
}
});
});
</script>
<div id="containerDiv" style="background-color:white;border-bottom:3px solid #ff6600;margin-left:50px;margin-right:50px;margin-bottom:140px;" class="animated fadeInUp">
<div class="" style="margin-left:15px;margin-right:15px;overflow-x:auto;" ><br>
<button class="btn btn-default px-3" style="float:right;" id="btnAddRow" name="btnAddRow" title="Add New row"><i class="fas fa-plus" aria-hidden="true"></i></button>
<table class="assessment" id="assessment" width="1526px" >
<thead style="background:-moz-linear-gradient( white, gray);">
<tr>
<th colspan="6" style="font-size:20px;">ASSESSMENT/FINDINGS:</th>
</tr>
<tr> <!---FIRST TABLE ROW--->
<th>DATE</th>
<th>NAME OF THE STAFF/S</th>
<th>ASSESSMENT/FINDINGS</th>
<th>ACTION TAKEN</th>
<th>DATE ACCOMPLISHED</th>
<th>ACTION</th>
</tr>
<tbody>
<?php
while ($row = $stmt->fetch()) { ?>
<tr>
<td style="height:30px" class="assessment-date" contenteditable><?php echo $row["date"] ?></td>
<td style="height:30px" class="assessment-staffname" contenteditable><?php echo $row["staffName"]; ?></td>
<td style="height:30px" class="assessment-findings" contenteditable><?php echo $row["findings"]; ?></td>
<td style="height:30px" class="assessment-action" contenteditable><?php echo $row["action"]; ?></td>
<td style="height:30px" class="assessment-date-accomplished" contenteditable><?php echo $row["date_accomplished"]; ?></td>
<td>
<button class="btn btn-warning px-2 btnSaveFindings" style="color:black;font-weight:bold;" title="Save" data-assessment-id="<?php echo $row['id']; ?>">
<i class="fas fa-save" aria-hidden="true"></i>
</button>
<button class="btn btn-info px-2 btnEdit" style="color:black;font-weight:bold;" title="Edit">
<i class="fas fa-edit" aria-hidden="true"></i>
</button>
</td>
</tr>
<?php
}
?>
</tbody>
</thead>
</table>
<br />
<br />
</div>
<?php
} catch(PDOException $e) {
error_log($e->getMessage());
echo "An error occurred";
}
然后,您需要创建运行查询的文件updateRow.php
。
<?php
header('Content-Type: application/json');
$pdo = new PDO('mysql:host=localhost:3306;dbname=******;charset=utf8mb4', '****', '*****' );
$pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
// See that the POST is sent
if (empty($_POST)) {
echo json_encode(['status' = false, 'message' => 'No data was sent. Update aborted']);
exit;
}
try {
$stmt = $pdo->prepare("UPDATE tbl_assessment
SET date = :date,
staffName = :staffName,
findings = :findings,
action = :action,
date_accomplished = :date_accomplished
WHERE id = :id");
$stmt->execute(['date' => $_POST['date'],
'staffName' => $_POST['staffName'],
'findings ' => $_POST['findings'],
'action ' => $_POST['action'],
'date_accomplished ' => $_POST['date_accomplished'],
'id ' => $_POST['id']]);
echo json_encode(['status' = true, 'message' => 'Update completed.']);
} catch (PDOException $e) {
error_log($e->getMessage());
echo json_encode(['status' = false, 'message' => 'An error occurred. Update failed.']);
}
最后一点,通常更好的方法是在元素上使用CSS类而不是内联样式。使代码更简洁,代码更可重复。