Click here to Skip to main content
15,936,294 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello, I have a webpage that has a table on it and I am trying to get my jQuery code to select a row at a time. I got it to select but it selects the whole table and will not deselect it when you click out. What did I miss in my code?

Here is my jQuery code:
JavaScript
$( function() {
    $( "#selectable" ).selectable();
  } );


Here is my HTML code:
HTML
<!DOCTYPE html>


<html lang="en">

<head>
	<title>Path of Light Yoga Studio :: Classes</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="jquery/date.js" type="text/javascript"></script>
	<script src="jquery/selectable.js" type="text/javascript"></script>
	
</head>
<body>
	<div id="wrapper">
	<header><h1>Path of Light Yoga Studio</h1></header>
		
			<a href="index.html">Home</a> 
			<a href="Classes.html">Classes</a> 
			<a href="Schedule.html">Schedule</a> 
			<a href="Contact.html">Contact</a> 
			<a href="Store.html">Store</a>
		
	
		<div id="hero"></div>
		<br>
			<h2>Yoga Schedule</h2>
		
		<dl>
			<br>
			<div id="p">Mats, blocks, and blankets provided. Please arrive 10 minutes before your class begins. Relax in our Serenity Lounge before or after your class.<p></p>
			<br>
			<dt><center>Monday - Friday</center></dt>
			<br>
				
				<table id="selectable">
					<tbody><tr>
						<th>Time</th>
						<th>Class</th>
					</tr>
					<tr>
						<td><center>9:00am</center></td>
						<td><center>Gentle Hatha Yoga</center></td>

					</tr>
					<tr>
						<td><center>10:30am</center></td>
						<td><center>Vinyasa Yoga</center></td>
					</tr>
					<tr>
						<td><center>5:30pm</center></td>
						<td><center>Restorative Yoga</center></td>
					</tr>
					<tr>
						<td><center>7:00pm</center></td>
						<td><center>Gentle Hatha Yoga</center></td>
					</tr>
				</tbody></table>			
			<br>
			<dt><center>Saturday & Sunday</center></dt>
			<br>
			<table style="width: 100%">
				<tbody><tr>
					<th>Time</th>
					<th>Class</th>
				</tr>
				<tr>
					<td><center>10:30am</center></td>
					<td><center>Gentle Hatha Yoga</center></td>
				</tr>
				<tr>
					<td><center>Noon</center></td>
					<td><center>Vinyasa Yoga</center></td>
				</tr>
				<tr>
					<td><center>1:30pm</center></td>
					<td><center>Gentle Hatha Yoga</center></td>
				</tr>
				<tr>
					<td><center>3:00pm</center></td>
					<td><center>Vinyasa Yoga</center></td>
				</tr>
				<tr>
					<td><center>5:30pm</center></td>
					<td><center>Restorative Yoga</center></td>
				</tr>
				</tbody></table>		
			
		</div></dl>
	

        Copyright 2016 © Path of Light Yoga<br>
        <a>khopkin5@my.westga.edu</a>

		<div>
			<span id="date"></span>	
		</div>	
		

</div>
</body>


Here is my CSS code:
CSS
header, nav, main, footer { display: block; }
* { box-sizing: border-box; } 
* {margin: 0px; padding: 0px; }
body    {   
		background-color: #F5F5F5;
        color: #3F2860;
        font-family: Verdana, Arial, sans-serif;
		margin-left: 0px;
		margin-top: 0px;
}

#wrapper {
			background-color: #F5F5F5;
			min-width: 1200px;
			max-width: 1480px;
			margin-left:  auto;
			margin-right: auto;
			width: 990px;
}

img {
		border: none;
}

header  {
		background-color: #9BC1C2;
		background-image: url(images/lilyheader.jpg);
		background-position: right;
		background-repeat: no-repeat;
		height: 150px;
        
}  

#feedback { font-size: 1.4em; 
}

#selectable .ui-selecting { background: #FECA40; 
 }
#selectable .ui-selected { background: #F39814; 
						  color: white; 
}
#selectable { list-style-type: none; 
              margin: 0; 
              padding: 0; 
              width: 100%; 
}
#selectable li { margin: 3px; padding: 0.4em; 
			   font-size: 1.4em; 
              height: 18px; 
}

p {
	background-color: #C8DDDE;
	width: 90%;
	padding: 1em;
	margin-left: 0;
	margin-right: 0;
	margin-top: 1em;
	margin-bottom: 1em;	
}

div p{
	padding: 0;
}
form{
	padding: 3em;
} 

label {
		float: left;
		display: block;
		text-align: right;
		font-weight: bold;
		width: 10em;
		padding-right: 1em;
}

input, textarea {

		display: block;
		margin-bottom: 2em;
}

#mySubmit{
	
		margin-left: 12em;
}

aside {
		width: 390px;
		float: left;
}	

#content {
		width: 990px;
}

h1      {
		padding-top: 50px; padding-left: 2em;
}

nav     {
		font-weight: bold;
        text-align: center;
		float: left;
		width: 160px;
		padding: 1em;
}

nav a   {
		text-decoration: none;
		padding: 1em;
		display: block;
		text-align: center;
		font-weight: bold;
		border: 3px outset #CCCCCC;
		margin-bottom: 1em;}
		nav a:link { color: #3F2860; }
		nav a:visited{ color: #497777; }
		nav a:hover { color: #A26100;} 
		border: 3px inset #333333; 
}

nav ul { 
		list-style-type: none; 
		padding-left: 0;
}

main {
		margin-left: 170px;
		padding-top: 1em;
		padding-right: 2em;
}

.studio  {
		font-style: italic;
}

footer  {
		background-color:#9BC1C2;
        font-size: 0.60em;
        font-style: italic;
        text-align: center;
		padding: 1em;
		height: 50px;
		clear: both;
}

.clear { clear: both; 
}

.floatleft { float: left; margin-right: 4em;
}

#mobile{display: none;
}

#desktop{display: inline;
}

table { width: 60%;
      margin: auto;
	  margin-bottom: 1em;
      border: 1px solid #3F3860;
	  border-collapse: collapse; 
}

caption { font-weight: bold;
        font-size: 120%;
        margin: 1em;		
}

th, td {  border: 1px solid #3F3860; 
		padding: 5px; 
}

tr:nth-of-type(even) { background-color: #98C1C2; 
}

@media only screen and (max-width: 1024px){

body { 
		margin: 0; 
		padding: 0; 
}

#wrapper { 
			width: 100%; 
	        min-width: 0;
			margin: 0;
			padding: 0; 
}

header { padding-top: 1px;
}
	
h1 { 
	padding-top: 1em; 
	padding-left: 0.5em; 
}
	
nav { 
	float: none;
	width: auto; 
}
	
nav a { 
	 padding: 0.2em;
	 margin-left: 0.3em; 
	 float: left;
     width: 24%; 
}

main {
		padding: 0 0 0 2em;
	    margin: 0;
		font-size: 90%;
		clear: both;
}

#hero img { 
			width: 100%;
	        height: auto; 
}

h2, h3, p, dl { 
		padding-left: 2em; 
		padding-right: 2em;
}

main ul { margin-left: 2em;
} 

.floatleft {
	margin-left: 2em; 
	margin-bottom: 1em;
}

.clear { 
	padding-left: 2em; }
}

@media only all and (max-width: 768px) {
	
h1 { font-size: 2em;
	padding-top: 0.25em;
	padding-left: 1.5em;
	text-align: center;
	width: 85%;
}

nav a { padding: 0.5em;
	  width: 45%;
	  float: left;
	  min-width: 6em;
	  margin-left: 0.5em;
}

#hero { display: none; 
}

.floatleft { float: none; 
			display: none; 
}

footer { padding: 0.5em; 
	   margin: 0;
}

#mobile { display: inline; 
}

#desktop { display: none;}
}


What I have tried:

I have tried to change the selection code and just use table.
Posted
Updated 16-Nov-16 10:24am

Try including the <tbody> in the jQuery selector, and filtering the children to just the <tr> elements:
JavaScript
$( "#selectable > tbody" ).selectable({ filter: "tr" });
 
Share this answer
 
Comments
Computer Wiz99 16-Nov-16 15:47pm    
So I will have to delete the jQuery code I have and use the one you provided?
Richard Deeming 16-Nov-16 15:53pm    
Yes - where you have $( "#selectable" ).selectable();, replace it with the code I posted.
Computer Wiz99 16-Nov-16 16:19pm    
Ok, I did that and nothing happened. I can't select the rows in the table.
Richard Deeming 16-Nov-16 16:29pm    
You need to include the jQuery UI stylesheet, and your own stylesheet as well. Neither of them are currently included based on your code.

Here's a working demo[^].

NB: You need to start the selection from within the table. If you start dragging from outside of the table, you'll end up selecting the text instead.
Karthik_Mahalingam 16-Nov-16 23:28pm    
5
I played around with it and this is what I did.


JavaScript
$( function() {
    $( "#selectable > tbody" ).selectable();
  } );
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900