jQuery
Show / Hide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style>
.blueStyle {
background-color : blue;
color : white;
}
</style>
<script type="text/javascript" src="/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/jquery/jquery.tablednd.1.0.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("table").tableDnD({
// When you drag an item, the item have a .bluestyle css
onDragClass : 'blueStyle',
// When you start drag
onDragStart : function(table,row){
console.log("start drag");
},
// When you stop drag
onDragStop : function(table,row){
// table number is be sorted
$("table").find("tr").each(function(index,data){
$(this).find("td").eq(0).html(index+1);
})
console.log("stop drag");
}
});
})
</script>
</head>
<body>
<table>
<body>
<table border = "1">
<tr>
<td>
1
</td>
<td>
first
</td>
<td>
first title
</td>
</tr>
<tr>
<td>
2
</td>
<td>
secound
</td>
<td>
second title
</td>
</tr>
<tr>
<td>
3
</td>
<td>
third
</td>
<td>
third title
</td>
</tr>
<tr>
<td>
4
</td>
<td>
fourth
</td>
<td>
fourth title
</td>
</tr>
</table>
</body>
</table>
</body>
</html>
Continue reading
jQuery
Empty
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#button").click(function(){
// only remove contents -> empty();
$("#showhide").empty();
// remove layer -> remove();
$("#showhide").remove();
})
});
</script>
</head>
<body>
<input type="button" id="button" value="hide" />
<div id="showhide" style="border : 1px solid red;">
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
Hello, this is jQuery <br/>
</div>
</body>
</html>
Example using Remove function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$(this).parent().remove();
})
});
</script>
</head>
<body>
<div id="showhide" style="border : 1px solid red;">
Hello, this is jQuery <br/>
<input type="button" class="btn" value="delete" />
</div>
<div id="showhide" style="border : 1px solid red;">
Hello, this is jQuery2 <br/>
<input type="button" class="btn" value="delete" />
</div>
</body>
</html>
Index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$(".layer").hide();
$(".layer").eq($(".btn").index(this)).slideDown();
})
});
</script>
</head>
<body>
<input type="button" class="btn" value="button1" />
<input type="button" class="btn" value="button2" />
<input type="button" class="btn" value="button3" />
<div class="layer" style="display: none">
Layer1<br/>
Layer1<br/>
Layer1<br/>
</div>
<div class="layer" style="display: none">
Layer2<br/>
Layer2<br/>
Layer2<br/>
</div>
<div class="layer" style="display: none">
Layer3<br/>
Layer3<br/>
Layer3<br/>
</div>
</body>
</html>
Continue reading
jQuery
Ajax (json)
json (dummy.json)
{ "title" : "hi",
"subject" : "nicetomeetyou",
"list" : [{
"subject" : "subject1"
"content" : "content1"
},{
"subject" : "subject1"
"content" : "content1"
},{
"subject" : "subject1"
"content" : "content1"
}]
}
<html>
<head>
<script type="text/javascript" src="/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//click load button
$("#loadButton").click(function(){
$.ajax({
url : "/dummy.json",
type : 'GET',
dataType : "json",
success : function(data){
$("#titleLayer").html("<h2>"+data.title+"</h2>");
$(".titleLayer").html("<h1>"+data.subject+"</h1>");
var list = data.list;
var tableTag = "";
/*
for(var i = 0; i<list.length; i++){
tableTag += "<tr><td>" + list[i].subject+"</td><td>" + list[i].content + "</td></tr>";
}
$("table").html(tableTag);
*/
$.each(list,function(index,data){
tableTag += "<tr><td>" + data.subject+"</td><td>" + data.content + "</td></tr>";
})
$("table").html(tableTag);
}
});
})
});
</script>
</head>
<body>
<input type="button" value="load" id=loadButton"/>
<div id="titleLayer"></div>
<div class="subjectLayer"></div>
<table width="100%" border="1"></table>
</body>
</html>
Continue reading