A few year ago, it was challenging a lot for web developer because of intensive user requirement such as complex interactive user interface and design in web page. Nowadays, it can be solved it out easily due to JQuery that is designed to change the way that you write JavaScript. This example show you how to select multiple cells in table.
First, create an jquery_air.css file as below.
More Detail : jQuery Crash Course
 |
| Multiple Selecting cells in table |
First, create an jquery_air.css file as below.
#airplane
{
font-size: 0;
margin: 0 0 15px;
overflow: hidden;
position: relative;
}
#airplane a
{
background-image: url(../img/uncheck.png);
background-repeat: no-repeat;
display: block;
width: 35px;
height: 35px;
}
#airplane a.selected
{
background-image: url(../img/check.png);
background-repeat: no-repeat;
}
Second, create an jquery_air.js as below.$(document).ready(function () {
var selectedList = new Array();
// Add click listener to seats
$('#airplane a').click(function () {
// Toggle selected class on/off
$(this).toggleClass('selected');
var add = true;
var title = $(this).attr('title').toString();
var len = selectedList.length;
for (var i = 0; i < len; i++) {
if (selectedList[i] == title) {
//remove title if exist already(it mean uncheck)
selectedList.splice(i, 1);
add = false;
break;
}
}
// add title if not exist in array(it mean check)
if (add)
selectedList.push(title);
//show selected title here
$('div#display').text(selectedList.toString());
//to get rid of the focus
this.blur();
//to stop the link from being followed
return false;
});
});
Put the following code to <head> tag. Keep in mind that we need jquery library here.<head runat="server"> <title>Multiple Selection</title> <script type="text/javascript" src="yoururl/jquery-1.4.1.js"></script> <link rel="stylesheet" type="text/css" href="yoururl/jquery_air.css" /> <script type="text/javascript" src="yoururl/jquery_air.js"></script> </head>In <form> tag, the table is look like as below.
<form id="form1" runat="server">
<div>
<table id="airplane">
<tr>
<td>
<a href="#row_01" title="01A">01A</a>
</td>
<td>
<a href="#row_01" title="01B">01B</a>
</td>
<td>
<a href="#row_01" title="01C">01C</a>
</td>
</tr>
<tr>
<td>
<a href="#row_02" title="02A">02A</a>
</td>
<td>
<a href="#row_02" title="02B">02B</a>
</td>
<td>
<a href="#row_02" title="02C">02C</a>
</td>
</tr>
<tr>
<td>
<a href="#row_03" title="03A">03A</a>
</td>
<td>
<a href="#row_03" title="03B">03B</a>
</td>
<td>
<a href="#row_03" title="03C">03C</a>
</td>
</tr>
</table>
</div>
<div id="display">
</div>
</form>
That' it. This table has 3 rows and 3 columns. When you click the table cell, it shows each table cell title you selected. JQuery is funny that way.More Detail : jQuery Crash Course
No comments:
Post a Comment