javascript - 使用 slideToggle on 按钮显示/隐藏信息
问题描述
Objective将name(input-text)和info(textarea-contains multiple line)插入到数据库中,提交表单后,在同一页面,2列用于在列name&info中显示相同的数据,但在信息栏。我为名称前面的每一行制作了按钮,slideToggle
用于显示/隐藏其中包含从“信息”列检索到的数据
问题- 当我单击第一行的按钮时,它不是仅显示与第一个条目相关的信息,而是滑动并仅在单击时显示与所有条目相关的所有信息。
*others - 又添加了一个输入到表单中,但隐藏用于 id(自动增量)
----index.php-----
<?php include('php_code.php'); ?>
<?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM records WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$acc = $n['acc_no'];
$info = $n['info'];
}
}
?>
<html>
<head>
<title>JSK</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('form').hide();
$('p').hide();
$('#sp').hide();
$("#inf").click(function(){
$("p").slideToggle();
$('#sp').slideToggle();
});
$("#fo").click(function(){
$("form").slideToggle();
});
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?>
<?php $results = mysqli_query($db, "SELECT * FROM records"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Account No</th>
<th>Info</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['acc_no']; ?></td>
<td><button id="inf" onclick="myFunction()">show</button></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
<a href="php_code.php?del=<?php echo $row['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<tr id="sp"> <td colspan="4"><p> <?php echo $row['info']; ?> </p></td>
</tr>
<?php } ?>
</table>
<div id="fotable" align="center">
<button id="fo">Add New/Edit</button>
</div>
<form method="post" action="php_code.php" >
<input type="hidden" name="id" value="<?php echo $id; ?>">
<div class="input-group">
<label>Name</label>
<input type="text" autocomplete="off" name="name" value="<?php echo $name; ?>">
</div>
<div class="input-group">
<label>Account No</label>
<input type="text" name="acc" value="<?php echo $acc; ?>">
</div>
<div class="input-group">
<label for="info">Info</label>
<textarea class="form-control" rows="8" name="info" id="info"><?php echo $row['info']; ?></textarea>
</div>
<div class="input-group">
<?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Add Account</button>
<?php endif ?>
</div>
</form>
</div><!-- left closed -->
<div class="right">
hello
</div> <!-- right closed -->
</div> <!-- container closed -->
</body>
</html>
---php_code.php-----
<?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'jskrecords');
// initialize variables
$name = "";
$acc = "";
$info = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "INSERT INTO records (name, acc_no, info) VALUES ('$name', '$acc', '$info')");
$_SESSION['message'] = "Account saved";
header('location: index.php');
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "UPDATE records SET name='$name',acc_no='$acc',info='$info' WHERE id=$id");
$_SESSION['message'] = "Account updated!";
header('location: index.php');
}
if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM records WHERE id=$id");
$_SESSION['message'] = "ACC deleted!";
header('location: index.php');
}
?>
解决方案
概念:
如果您使用 php 脚本从同一个 mysql 表创建多个表单,您需要为每个表单提供一个唯一的 id。例如
<form method="post" action="php_code.php" id="form<?= $id ?>">
然后将 data-target="#form" 添加到具有类 'inf' 的按钮。它将存储表单的 id。
<button class="inf" data-target="#form<?= $id ?>">show</button>
单击按钮时,我们知道要从数据目标打开哪个表单。
<script>
$('.container').on('click','button.inf',function(e){
e.preventDefault();
var formid=$(this).attr('data-target'); //get value of data-target attribute
//...proceed to play toggle with this form 'formid'
推荐阅读
- swift - swift Accelerate:vDSP 枚举
- sql - 从 DB2 到 Oracle PLSQL
- javascript - lit-element 中 document.getElementById('aa').innerHTML = this.value 的等价物是什么?
- xamarin - 无法解析命名空间“Android.Support.V7.App”中的“支持”
- python - Python函数将在给定字符串中查找和计算元音
- excel - 使用 excel VBA 交换任意两个单元格 - 包括不相邻的单元格
- swift - Firebase 推送通知在 iOS 13 上不起作用
- javascript - 如何使随机生成器编号随时间随机改变数字?
- firebase - Cloud Firestore 上一组对象的数组、地图和子集合
- linux - 将目录树中的所有文件连接到带有路径分隔符的单个文件中