The Edit button is not working, Please help how to make the Edit button to edit the values
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".pane:even").addClass("alt");
$(".pane .btn-delete").click(function(){
alert("This Row will be deleted!");
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
$(".pane .btn-edit").click(function(){
alert("Do You Wish To Edit this row!");
$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
.animate({ backgroundColor开发者_开发问答: "#ffffff" }, "slow")
.removeClass("spam")
return false;
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 470px;
}
a, a:visited {
color: #000099;
}
a:hover {
text-decoration: none;
}
h3 {
margin: 0;
padding: 0 0 .3em;
}
p {
margin: 0;
padding: 0 0 1em;
}
.pane {
background: #ffffff;
padding: 10px 20px 10px;
position: relative;
border-top: solid 1px #ccc;
}
.alt {
background: #f5f4f4;
}
.spam {
color: #999999;
}
</style>
</head>
<body>
<div class="pane">
<h3>Row 1</h3>
<p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn- edit">edit</a>
</div>
<div class="pane spam">
<h3>Row 2:</h3>
<p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn-Edit">edit</a>
</div>
<div class="pane">
<h3>Row 3:</h3>
<p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn- Edit">edit</a>
</div>
<div class="pane">
<h3>Row4</h3>
<p><a href="#" class="btn-delete">Delete</a> | <a href="#" class="btn- edit">edit</a>
</div>
</body>
</html>
If i want to edit and delete a mysql table can i use the same concepts of buttons.
You have a few simple javascript errors that you might address and see if that is the problem. For example you are missing a semicolon here:
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
As well as here:
$(".pane .btn-edit").click(function(){
alert("Do You Wish To Edit this row!");
$(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
.animate({ backgroundColor: "#ffffff" }, "slow")
.removeClass("spam");
Also and most importantly, javascript is CaSe SEnsitivE. You have your edit class named: 'btn-edit' AND 'btn-Edit'. Your jQuery code only references 'btn-edit'.
UPDATE: After making the suggested updates the code works fine, you can check it out here:
Example
加载中,请稍侯......
精彩评论