Contacts program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border=1>
</table><br><br>
<table>
<tr>
<td>name</td><td><input type="text" id=txtname size=12></td>
</tr>
<tr>
<td>gender</td>
<td><input type="radio" id=female name=gender size=12>female
<input type="radio" id=male name=gender size=12>male</td>
</tr>
<tr>
<td>mobile</td><td><input type="phone" id=mobile size=12></td>
</tr>
<tr>
<td colspan="3"><input type="button" id="btnSubmit" value="add">
<input type="button" id="btnReset" value="reset">
<input type="button" id="btnDelete" value="delete">
<input type="button" id="btnUpdate" value="update">
</td>
</tr>
</table>
</body>
<script src="http://code.jquery.com/jquery-3.5.0.js">
</script>
<script language="javascript">
var nClick=-1;
$(document)
.on('click','#btnSubmit', function(){
var name = $('#txtname').val();
var gender=$('input:radio[name=gender]:checked').attr('id');
var mobile = $('#mobile').val();
if($('#txtname').val()==''){
alert('Enter a name');
return false;
}
if($('input:radio[name=gender]:checked').attr('id')==''){
alert('Check gender');
return false;
}
if($('#mobile').val()==''){
alert('Enter mobile');
return false;
}
var str='<tr><td>'+name+'</td><td>'+gender+'</td><td>'+mobile+'</td></tr>';
$(str).appendTo("table:first-child");
$('#txtname').val('');
$('input:radio[name=gender]').prop('checked', false);
$('#mobile').val('');
console.log("done");
})
.on('click', '#btnReset', function(){
$('#txtname').val('');
$('input:radio[name=gender]').prop('checked',false);
$('#mobile').val('');
console.log("reset")
})
//change color
.on('click','table:eq(0) tr',function(){
if(nClick>-1){
$('table:eq(0) tr:eq('+nClick+')').css('background-color','white');
}
nClick=$(this).index();
$(this).css('background-color','yellow');
var str1=$('table:eq(0) tr:eq('+nClick+') td:eq(0)').text();
var str2=$('table:eq(0) tr:eq('+nClick+') td:eq(1)').text();
var str3=$('table:eq(0) tr:eq('+nClick+') td:eq(2)').text();
if(str2=='female'){
$("#female").prop("checked", true);
}else{
$("#male").prop("checked", true);
}
$('#txtname').val(str1);
$('#mobile').val(str3);
return false;
})
.on('click', '#btnDelete', function(){
nClick=$('table:eq(0) tr:eq('+nClick+')').index();
$('tr:eq('+nClick+') td:eq(0)').closest('tr').remove();
})
//update button
.on('click','#btnUpdate',function(){
nClick=$('table:eq(0) tr:eq('+nClick+')').index();
$('tr:eq('+nClick+') td:eq(0)').closest('tr').remove();
var name = $('#txtname').val();
var gender=$('input:radio[name=gender]:checked').attr('id');
var mobile = $('#mobile').val();
if($('#txtname').val()==''){
alert('Enter a name');
return false;
}
if($('input:radio[name=gender]:checked').attr('id')==''){
alert('Check gender');
return false;
}
if($('#mobile').val()==''){
alert('Enter mobile');
return false;
}
var str='<tr><td>'+name+'</td><td>'+gender+'</td><td>'+mobile+'</td></tr>';
$(str).appendTo("table:first-child");
$('#txtname').val('');
$('input:radio[name=gender]').prop('checked', false);
$('#mobile').val('');
console.log("done");
})
</script>
</html>-
result
-
change color code
<style>
.highlight{
background-color: blanchedalmond;
}
</style>
//change color
.on('click','table:eq(0) tr',function(){
var selected = $(this).hasClass("highlight");
$(this).removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
}).clone()
$(".hello").clone() == copy hello class
disabled
each()
eq() / .eq()
even selector
Find even number
event.pageX
<div style = 'width:300px, height:300px, background-color:black'>
.on('mousemove', 'div', function(event){ // every event in div
console.log('X ['+event.pages+'] Y ['+event.pageY+']);
return false;Show the location of mouse in div
event.which
Show which key is pressed
fade in/out
similar to animation
input tyle ='file'
사진 넣는 창
.focus
gt() selector (greater than ())
eq(0) index 0
gt(0) index == all indexes greater than 0
gt(2) index == all indexes greater than 2
.has()
.hasClass
$('#mydiv').hasClass("foo"); == Does "foo" have mydiv?
==> true or false
.hide
★ .html() ★
insert html tag
.text(' ') ==> display the text
.html(' ') ==> rendering
