JavaScript多读,少读按钮,动态数据来自MySQL数据库和PHP



我已经从数据库中获取了一个关联数组,问题是目的即$row['purpose']保持不变,并设置为获取的最后一行下面是我的整个PHP脚本

注:-这个问题被回答,问题代码被替换为一个工作答案问题已被回答,我提供的问题代码已被答案中的代码所取代。

<?php
session_start();
$Write = "<?php $" . "UIDresult=''; " . "echo $" . "UIDresult;" . " ?>";
file_put_contents('UIDContainer.php', $Write);
//require 'authorize-admin.php';
if (!isset($_SESSION['user']) || $_SESSION['user'] != 'admin' && $_SESSION['user'] != '') {
header('Location:admin-login.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Guest Data : NodeMCU V3 ESP8266 / ESP12E with MYSQL Database</title>
</head>
<body>
<!--<h2 align="center">NodeMCU V3 ESP8266 / ESP12E with MYSQL Database</h2>-->
<?php include 'navbar.php' ?>
<br>
<label class="badge badge-info" style="font-size:50px;padding:5px;display:block;text-align:center;">Guest Data</label>
<div style="padding-left:10px;padding-right:10px">
<table width="1000" class="table" style="border-top-color:#343a40;border:2px solid #343a40;font-size:20px;">
<thead class="thead-dark">
<tr>
<th scope="col">Guest No.</th>
<th scope="col">Name</th>
<th scope="col">RFID</th>
<th scope="col">Gender</th>
<th scope="col">Email</th>
<th scope="col">Address Line 1</th>
<th scope="col">Address Line 2</th>
<th scope="col">Mobile</th>
<th scope="col">Purpose</th>

</tr>
</thead>
<tbody>
<?php
include 'database.php';
$pdo = Database::connect();
$sql = 'SELECT * FROM guest ORDER BY guest_no ASC';
//$sql = 'SELECT Employee.emp_no,Employee.name,Employee.email,Employee.address_line_1,Employee.address_line_2,contact.mobile_no,car.car_num,car.Ccar_type,user.rfid_no FROM Employee INNER JOIN user on Employee.email=user.email INNER JOIN contact on contact.CONemp_no = user.u_emp_no INNER JOIN car on car.Crid_no = user.rfid_no ORDER BY Employee.emp_no ASC';
$result = $pdo->query($sql);
$index = 0;
foreach ($result as $row) {
echo '<tr>';
echo '<td>' . $row['guest_no'] . '</td>';
echo '<td>' . $row['name'] . '</td>';
echo '<td scope="row">' . $row['rfid_no'] . '</td>';
echo '<td>' . $row['gender'] . '</td>';
echo '<td>' . $row['email'] . '</td>';
echo '<td>' . $row['address_line_1'] . '</td>';
echo '<td>' . $row['address_line_2'] . '</td>';
echo '<td>' . $row['mobile_no'] . '</td>';
if (strlen($row['purpose']) > 50) {
$str = '<span id="dots' . $index . '" style="overflow-wrap:break-word;max-width:300px">' . substr($row['purpose'], 0, 20) . '...</span><span id="more' . $index . '"><span>';
echo '<td><div style="overflow-wrap:break-word;max-width:500px">' . $str . '</span></div>
<button class="btn btn-primary " onclick="myFunction(' . $index . ','' . $row['purpose'] . '')" id="myBtn' . $index . '" style="vertical-align-top;">Read more</button></td>
<script>
function myFunction(id,purpose) {

var dots = document.getElementById("dots"+id);
var moreText = document.getElementById("more"+id);
var btnText = document.getElementById("myBtn"+id);
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; 
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; 
moreText.style.display = "inline";
moreText.innerText = purpose.toString() ;
}
}
</script>';
echo '</tr>';
$index++;
} else {
echo '<td><div style="overflow-wrap:break-word;max-width:300px">' . $row['purpose'] . '</div></td>';
}
}

Database::disconnect();
?>
</tbody>
</table>
<a href="guest-registration.php" style="float:right;margin-right:40px;"><label class="btn btn-primary"><b style="font-size:20px;">+</b>Add new user</label></a>
</div>
<script src="js/script.js"></script>
<script>
document.querySelector('.gData').classList.add('active');
document.querySelector('.home').classList.remove('active');
</script>
</body>

</html>

在您的foreach中,您应该传递$row['purpose']的实际值

.....
<script>
function myFunction(id , $row['purpose'] ) {
....

在js函数中得到实际值

function myFunction(id, purpose ) {
var dots = document.getElementById("dots"+id);
var moreText = document.getElementById("more"+id);
var btnText = document.getElementById("myBtn"+id);
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more"; 
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less"; 
moreText.style.display = "inline";
moreText.innerText =purpose ; // here you have actual value  

}
}

最新更新