在.php中创建Textarea和submit按钮以隐藏数据库表中的每一行
Making Textarea and submit button in .php to hide for every row in database table?
我做了很长时间了。想要添加一个js效果(隐藏/取消隐藏)到一个简单的提交表单…
幸运的是，它正在工作，但不幸的是，它只工作于DB表中的单行。
我制作了脚本:1(张贴在下面)，这是由一个好心人从这个网站更正的脚本:2(张贴在下面)。
不幸的是两者都不能工作。希望你们能帮我找到丢失的那块。
# 1脚本
<!DOCTYPE html>
<html lang="en">
<head>
<?php
$servername = "localhost";
$password = "*****";
$dbname = "the_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM input";
$result = $conn->query($sql);
?>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<style>
.name {
width: 700px;
margin-top: 1%;
margin-left: 20%;
padding-left:2%;
padding-right:2%;
padding-top:10%;
margin-right: 35%;
word-wrap: break-word;
}
textarea#addtext{
width:600px;
height:100px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js">
</script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$().ready = function() {
$('#addtext').hide();
$('#addsubmit').hide();
$("#add").click(function() {
$('#add').hide();
$('#addtext').fadeIn('slow').focus();
$('#addsubmit').fadeIn('slow');
});
$('#addtext').blur(function(){
$('#addtext').hide();
$('#addsubmit').hide();
$('#add').fadeIn('slow');
});
}();
});//]]>
</script>
</head>
<body>
<div class="name">
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) { ?>
<div id="q">
<B><big><font color= #ba4a00> Q:</font></big> <?php echo $row["question"]; ?> </B></br>
<B><small><font color= #ba4a00> Description:</font> <?php echo $row["description"]; ?> </small></B></br>
<p id="tag1"><small> <?php echo $row["subject"]; ?> </small></p><p id="tag2"><small> <?php echo $row["sub_subject"]; ?> </small></p>
<button class="addanswer" id="add"><B>Add Answer</B></button>
<form>
<textarea class="addtext" name="addtext" required id="addtext" placeholder="Please type your question here.."></textarea>
<button class="addanswer" id="addsubmit"><B>Submit</B></button>
</form>
<small><p><?php echo $row["date"]; ?></p></small>
</div>
<?php }
} else {
echo "0 results";
}
$conn->close();
?>
</div>
</body>
</html>
脚本
<!DOCTYPE html>
<html lang="en">
<head>
<?php
$servername = "localhost";
$username = "root";
$password = "******";
$dbname = "the_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM input";
$result = $conn->query($sql);
?>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<style>
.name {
width: 700px;
margin-top: 1%;
margin-left: 20%;
padding-left:2%;
padding-right:2%;
padding-top:10%;
margin-right: 35%;
word-wrap: break-word;
}
textarea#addtext{
width:600px;
height:100px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js">
</script>
<script type='text/javascript'>
function addanswer(index){
$('#add_' + index).hide();
$('#addtext_' + index).fadeIn('slow').focus();
$('#addsubmit_' + index).fadeIn('slow');
}
</script>
</head>
<body>
<div class="name">
<?php
if ($result->num_rows > 0) {
$index = 0;
while($row = $result->fetch_assoc()) {
$index++; // stuff inside foreach goes here
?>
<div id="q">
<B><big><font color= #ba4a00> Q:</font></big> <?php echo $row["question"]; ?> </B></br>
<B><small><font color= #ba4a00> Description:</font> <?php echo $row["description"]; ?> </small></B></br>
<p id="tag1"><small> <?php echo $row["subject"]; ?> </small></p><p id="tag2"><small> <?php echo $row["sub_subject"]; ?> </small></p>
<?php
echo '<button class="add" id="add_'.$index.'"><B>Add</B></button>';
echo '<form style="display:none;" name="answerswer_'.$index.'" method="post" action="output.php">'; // I dont think openning form from row to row would be nice!
echo '<textarea style="display:none;" type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your question here.."></textarea>';
echo '<button style="display:none;" onClick="addsubmit('.$index.');" type="addsubmit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>';
echo '</form>';
?>
<small><p><?php echo $row["date"]; ?></p></small>
</div>
<?php }
} else {
echo "0 results";
}
$conn->close();
?>
</div>
</body>
</html>
好了，这是你重写的代码，我没有测试过，但如果你的PHP代码没有语法错误，你的DB启动并运行，它应该可以工作:
config.php(我添加config.php只是为了更好的实践)
<?php
$servername = "localhost";
$username = "root";
$password = "******";
$dbname = "the_database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
list.php(这将是你的模板文件和一些PHP逻辑在那里*不是最佳实践)
<?php require_once('config.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<style>
.name {
width: 700px;
margin-top: 1%;
margin-left: 20%;
padding-left: 2%;
padding-right: 2%;
padding-top: 10%;
margin-right: 35%;
word-wrap: break-word;
}
textarea#addtext {
width: 600px;
height: 100px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js">
</script>
</head>
<body>
<div class="name">
<?php
$sql = "SELECT * FROM input";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$index = 0;
while($row = $result->fetch_assoc()) {
$index++; // stuff inside foreach goes here
?>
<div id="q">
<!-- NEVER user an ID on elements that are recurring, thats completely wrong, use a class or 'data-' attr -->
<B><big><font color= #ba4a00> Q:</font></big> <?php echo $row["question"]; ?> </B>
</br>
<B><small><font color= #ba4a00> Description:</font> <?php echo $row["description"]; ?> </small></B>
</br>
<p id="tag1"><small> <?php echo $row["subject"]; ?> </small></p>
<p id="tag2"><small> <?php echo $row["sub_subject"]; ?> </small></p>
<?php
echo '<button class="add" id="add_'.$index.'"><B>Add</B></button>';
echo '<form style="display:none;" name="answerswer_'.$index.'" method="post" action="output.php">'; // I dont think openning form from row to row would be nice!
echo '<textarea type="text" class="addtext" name="addtext" required id="addtext_'.$index.'" placeholder="Please type your question here.."></textarea>';
echo '<button onClick="addsubmit('.$index.');" type="submit" id="addsubmit_'.$index.'" class="addsubmit"><B>Submit</B></button>';
echo '</form>';
?>
<small><p><?php echo $row["date"]; ?></p></small>
</div>
<?php }
} else {
echo "0 results";
}
$conn->close();
?>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$('.add').click(function(e) {
e.preventDefault();
$(this).parent().find('form').fadeIn('slow').focus();
$(this).hide();
});
});
</script>
</body>
</html>
第二个编辑
如果你需要在文本区域失焦时隐藏表单:https://api.jquery.com/focusout/
$('.addtext').focusout(function() {
$(this).parent().fadeOut('slow');
$(this).parent().parent().find('.add').show();
});
**第三次编辑**自动聚焦文本区域
<script type='text/javascript'>
$(document).ready(function() {
$('.add').click(function(e) {
e.preventDefault();
$(this).parent().find('form').fadeIn('slow');
$(this).parent().find('form textarea.addtext').focus();
$(this).hide();
});
});
</script>
相关文章：
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 谷歌地图-数据库中的标记只显示最后一行的信息
- 删除数据库(JSP）上的一行
- 使用Ajax和JQuery从SQL数据库中添加和删除一行
- Html-从数据库中删除一行
- PHP 脚本仅从 MySQL 数据库中获取地址字段的第一行
- 使用表单中的PHP按钮根据变量ID从MYSQL数据库表中删除一行
- 在更新数据库中的一行之后，再次运行php行
- 如何在嵌入php的html表中为每一行添加复选框，并在数据库(Postgresql）中更新其值
- Express.js-从MySQL数据库中检索一行
- PHP MYSQLI无法从数据库中删除一行数据
- 如何在15天后自动删除数据库中的一行数据
- 如何显示每一行从数据库在不同的页面在php
- ECONNRESET一行查询数据库两次写错误[Node.js]
- 不能从SQLITE数据库中删除一行
- AJAX调用PHP文件，从数据库中删除一行
- 当用户向数据库插入一行时如何刷新页面
- 在.php中创建Textarea和submit按钮以隐藏数据库表中的每一行
- 数据库不同分区中的每一行
- While循环只显示数据库中的最后一行，当点击按钮[显示模态对话框]
