如何使用jquery在表中选择？ [英] How to select in a table using jquery?
本文介绍了如何使用jquery在表中选择？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我有一个网页，上面有一个表格，我试图让我的jQuery代码一次选择一行。我让它选择，但它选择整个表格，当你点击时不会取消选择它。我在代码中错过了什么？
这是我的jQuery代码：
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:
$( function() {
$( "#selectable" ).selectable();
} );
这是我的HTML代码：
Here is my HTML code:
<!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>
这是我的CSS代码：
Here is my CSS code:
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.
What I have tried:
I have tried to change the selection code and just use table.
推荐答案
( function() {
( \"#selectable\" ).selectable();
} );
( "#selectable" ).selectable(); } );
Here is my HTML code:
Here is my HTML code:
<!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:
Here is my CSS code:
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.
What I have tried:
I have tried to change the selection code and just use table.
Try including the<tbody>in the jQuery selector, and filtering the children to just the<tr>elements:
Try including the<tbody>in the jQuery selector, and filtering the children to just the<tr>elements:
这篇关于如何使用jquery在表中选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
