How to select in a table using jquery?

Question

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 16-Nov-16 9:08am

Computer Wiz99

Updated 16-Nov-16 10:24am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2016-11-16T09:44:00

Solution 1

Try including the <tbody> in the jQuery selector, and filtering the children to just the <tr> elements:

JavaScript

$( "#selectable > tbody" ).selectable({ filter: "tr" });

Posted 16-Nov-16 9:44am

Richard Deeming

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

Computer Wiz99 · Answer 2 · 2016-11-16T10:24:00

Solution 2

I played around with it and this is what I did.

JavaScript

$( function() {
    $( "#selectable > tbody" ).selectable();
  } );

Posted 16-Nov-16 10:24am

Computer Wiz99