Một mã nguồn JavaScript khá thú vị, mã nguồn này sẽ cho phép đổi màu nền của từng ô khi được sự kiến click được xảy ra trên từng ô riêng biệt, khi click lần thứ nhất màu nền của ô sẽ được chuyển đổi từ màu trắng sang màu đỏ, khi click lần thứ 2 sẽ được chuyển đổi từ màu đỏ sang màu vàng, và khi click lần thứ 3 sẽ trở lại lần thứ thứ là màu trắng.
Java Scrpit Source:
Java Scrpit Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Java Scrpit source(mã nguồn) thay đổi đổi màu nền của từng ô trong bảng khi click chuột vào.</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<style type='text/css'>
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
$('td').click(function () {
var cell = $(this),
state = cell.data('state') || 'first';
switch (state) {
case 'first':
cell.addClass('red');
cell.data('state', 'second');
break;
case 'second':
cell.addClass('yellow');
cell.data('state', 'third');
break;
case 'third':
cell.removeClass('red yellow');
cell.data('state', 'first');
break;
default:
break;
}
});
});//]]>
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Hello</td>
<td>Happy</td>
<td>New</td>
<td>Year</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Java Scrpit source(mã nguồn) thay đổi đổi màu nền của từng ô trong bảng khi click chuột vào.</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<style type='text/css'>
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
$('td').click(function () {
var cell = $(this),
state = cell.data('state') || 'first';
switch (state) {
case 'first':
cell.addClass('red');
cell.data('state', 'second');
break;
case 'second':
cell.addClass('yellow');
cell.data('state', 'third');
break;
case 'third':
cell.removeClass('red yellow');
cell.data('state', 'first');
break;
default:
break;
}
});
});//]]>
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Hello</td>
<td>Happy</td>
<td>New</td>
<td>Year</td>
</tr>
</tbody>
</table>
</body>
</html>
No comments:
Post a Comment