我是php的新手 我想使用jquery从php回显代码中删除一个表行,但它不起作用。 这是我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>test insert</title>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').click(function(){
$(this).parent().parent().fadeOut('slow');
});
$('#show').click(function(){
$.post('data.php',{action: "show"},function(res){
$('#result').hide().html(res).fadeIn('slow');
});
});
});
</script>
</head>
<body>
<h2>Show Data</h2>
<button id="show">Show</button>
<p>Result:</p>
<div id="result"></div><br>
</body>
</html>
这是我的PHP代码:
<?php
//connect to db
$con = mysql_connect('localhost','root');
$db = mysql_select_db('test');
//if show key is pressed show records
if($_POST['action'] == 'show'){
$sql = "select * from customer order by Firstname";
$query = mysql_query($sql);
echo "<table><tr><th>Firstname</th><th>Lastname</th><th>Keynumber</th>
<th>Number2</th><th>Number3</th><th>Option</th><th><button class='del' >delete</button></th></tr>";
while($row = mysql_fetch_array($query)){
echo "<tr><td>$row[firstname]</td><td>$row[lastname]</td><td class='key'>$row[keynumber]</td>
<td>$row[number2]</td><td>$row[number3]</td><td><button class='del' >delete</button></td></tr>";
}
echo "</table>";
}
?>
当我按下“删除”按钮时,它不起作用 我不知道为什么它不起作用:(
答案 0 :(得分:1)
单击show按钮时,您的数据似乎是动态加载的。如果是,则需要使用.on()
代替.click()
和.on()的delegated event syntax。将删除按钮代码更改为:
$(document).on('click', '.del', function(){
$(this).parent().parent().fadeOut('slow');
});
答案 1 :(得分:0)
我已经更正了你的代码,只需检查一下,
<script type="text/javascript">
$(document).ready(function(){
$('.del').click(function(){
$(this).parent().parent().fadeOut('slow');
});
$('#show').click(function(){
$.post(
url:'data.php',
data:{action: "show"},
type:'POST',
function(res){
$('#result').hide().html(res).fadeIn('slow');
});
});
});
</script>