如何仅突出显示选定的<；部门>；使用jquery使用背景色？
我正在发布我在jQuery中尝试过的代码，可能是一个基本的代码，但由于我是新手，希望您能理解并帮助我。我想唯一选择的区域应该是彩色的，其余的以前点击的区域和非选择的区域应该是非彩色的 在这段代码中，我可以对每个标签应用所需的颜色。。。 但是如何完成要求的任务 希望你的帮助。。。提前谢谢如何仅突出显示选定的<；部门>；使用jquery使用背景色？,jquery,Jquery,我正在发布我在jQuery中尝试过的代码，可能是一个基本的代码，但由于我是新手，希望您能理解并帮助我。我想唯一选择的区域应该是彩色的，其余的以前点击的区域和非选择的区域应该是非彩色的 在这段代码中，我可以对每个标签应用所需的颜色。。。 但是如何完成要求的任务 希望你的帮助。。。提前谢谢 <script type="text/javascript" src="scripts/jquery-latest.min.js" > </script> <script type=
<script type="text/javascript" src="scripts/jquery-latest.min.js" > </script>
<script type="text/javascript">
$(document).ready(function () {
$(".cell1").click(function () {
$(this).css("background-color", "red");
});
});
</script>
<style type="text/css">
.table
{
display: table;
width:700px;
border: 1px solid #aaa;
}
.row
{
display: table-row;
height:100px;
border: 1px solid #aaa;
}
.cell
{
display: table-cell;
width:100px;
font-size:larger;
text-align:center;
}
.cell1
{
display :table-cell;
width:100px;
font-size:small;
border: 1px solid #aaa;
}
.cell2
{
display:table-cell;
height:90px;
width:100px;
}
</style>
$（文档）.ready（函数（）{
$（“.cell1”）。单击（函数（）{
$（this.css（“背景色”、“红色”）；
});
});
桌子
{
显示：表格；
宽度：700px；
边框：1px实心#aaa；
}
一行
{
显示：表格行；
高度：100px；
边框：1px实心#aaa；
}
单间牢房
{
显示：表格单元格；
宽度：100px；
字体大小：较大；
文本对齐：居中；
}
.cell1
{
显示：表格单元格；
宽度：100px；
字体大小：小；
边框：1px实心#aaa；
}
.cell2
{
显示：表格单元格；
高度：90px；
宽度：100px；
}
太阳
周一
星期二
结婚
清华大学
星期五
坐
27
28
29
30
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
清除以前单击设置的背景颜色
$(".cell1").click(function () {
$(".cell1").not(this).css("background-color", ""); //Added this statement
$(this).css("background-color", "red");
});
清除以前单击设置的背景颜色
$(".cell1").click(function () {
$(".cell1").not(this).css("background-color", ""); //Added this statement
$(this).css("background-color", "red");
});
您可以使用类库解决方案，如
$(document).ready(function () {
$(".cell1").click(function () {
$('.cell1.highlight').removeClass('highlight')
$(this).addClass("highlight");
});
});
演示：您可以使用类库解决方案，如
$(document).ready(function () {
$(".cell1").click(function () {
$('.cell1.highlight').removeClass('highlight')
$(this).addClass("highlight");
});
});
$(".cell1").click(function () {
$(".cell1").removeAttr('style')
$(this).css("background-color", "red");
});
$(".cell1").click(function () {
$(".cell1").removeAttr('style')
$(this).css("background-color", "red");
});
与较短版本（性能方面）相比，此代码使用较少的选择和搜索
与较短版本相比，此代码使用较少的选择和搜索（性能方面）
在这里，我得到了一个答案，用JQUERY（AJAX）将选定块的背景着色，并将一些字段存储到数据库中
希望我的回答对初学者有用。。
$（文档）.ready（函数（）{
$（“.cell1”）。单击（函数（）{
$（“.cell1”）.not（this）.css（“背景色”，”）；//添加了此语句
$（this.css（“背景色”、“红色”）；
});
});
函数myfunc（ID）{
开关（ID）{
案例“num1”：day=“MON”；
日期=“27”；
打破
案例“num2”：day=“TUE”；
日期=“28”；
打破
案例“num3”：day=“WED”；
日期=“29”；
打破
案例“num4”：day=“THU”；
日期=“30”；
打破
案例“num5”：day=“FRI”；
日期=“1”；
打破
案例“num6”：day=“SAT”；
日期=“2”；
打破
}
var data=JSON.stringify（{day:day，date:date}）；
$.ajax({
类型：“POST”，
url:“Calender.aspx/INSERT_记录”，
数据：数据，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
success:function（）{alert（“success”）；}，
错误：函数（）{alert（“error”）；}
});
}
桌子
{
显示：表格；
宽度：700px；
边框：1px实心#aaa；
}
一行
{
显示：表格行；
高度：100px；
边框：1px实心#aaa；
}
单间牢房
{
显示：表格单元格；
宽度：100px；
字体大小：较大；
文本对齐：居中；
}
.cell1
{
显示：表格单元格；
宽度：100px；
字体大小：小；
边框：1px实心#aaa；
}
.cell2
{
显示：表格单元格；
高度：90px；
宽度：100px；
}
太阳
周一
星期二
结婚
清华大学
星期五
坐
/***不是为所有标记编写div标记处的函数调用******************/
27
28
29
30
1.
2.
3.
4.
5.
6.
7.
8.
Here i got the answer to color the bacgroung of ONLY SELECTED BLOCK AND STORING SOME FIELDS IN TO DATA BASE USING JQUERY(AJAX)
HOPE MY ANSWER WILL BE USEFUL TO THE STARTERS..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calender.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-latest.min.js" > </script>
<script type="text/javascript" src="scripts/json2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".cell1").click(function () {
$(".cell1").not(this).css("background-color", ""); //Added this statement
$(this).css("background-color", "red");
});
});
function myfunc(ID) {
switch(ID) {
case "num1": day = "MON";
date = "27";
break;
case "num2": day="TUE";
date="28";
break;
case "num3": day = "WED";
date = "29";
break;
case "num4": day = "THU";
date = "30";
break;
case "num5": day = "FRI";
date = "1";
break;
case "num6": day = "SAT";
date = "2";
break;
}
var data = JSON.stringify({ day: day, date: date });
$.ajax({
type: "POST",
url: "Calender.aspx/INSERT_RECORD",
data: data,
contentType: "application/json; charset=utf-8",
datatype: "json",
success: function () { alert("success"); },
error: function () { alert("error"); }
});
}
</script>
<style type="text/css">
.table
{
display: table;
width:700px;
border: 1px solid #aaa;
}
.row
{
display: table-row;
height:100px;
border: 1px solid #aaa;
}
.cell
{
display: table-cell;
width:100px;
font-size:larger;
text-align:center;
}
.cell1
{
display :table-cell;
width:100px;
font-size:small;
border: 1px solid #aaa;
}
.cell2
{
display:table-cell;
height:90px;
width:100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="table">
<div class="row">
<div class="cell">
Sun
</div>
<div class="cell">
Mon
</div>
<div class="cell">
Tue
</div>
<div class="cell">
Wed
</div>
<div class="cell">
Thu
</div>
<div class="cell">
Fri
</div>
<div class="cell">
Sat
</div>
</div>
/*** the function calls at div tags are not written for all tags ******************/
<div class="row">
<div id="num1" class="cell1" onclick="myfunc(id)">
27
</div>
<div class="cell1" id="num2" onclick="myfunc(id)">
28
</div>
<div class="cell1" id="num3" onclick="myfunc(id)">
29
</div>
<div class="cell1" id="num4" onclick="myfunc(id)" >
30
</div>
<div class="cell1" id="num5" onclick="myfunc(id)">
1
</div>
<div class="cell1" id="num6" onclick="myfunc(id)">
2
</div>
<div class="cell1" id="num7">
3
</div>
</div>
<div class="row">
<div class="cell1" id="num8">
4
</div>
<div class="cell1" id="num9">
5
</div>
<div class="cell1" id="num10">
6
</div>
<div class="cell1" id="num11">
7
</div>
<div class="cell1" id="num12">
8
</div>
<div class="cell1" id="num13">
9
</div>
<div class="cell1" id="num14">
10
</div>
</div>
<div class="row">
<div class="cell1" id="num15">
11
</div>
<div class="cell1" id="num16">
12
</div>
<div class="cell1" id="num17">
13
</div>
<div class="cell1" id="num18">
14
</div>
<div class="cell1" id="num19">
15
</div>
<div class="cell1" id="num20">
16
</div>
<div class="cell1" id="num21">
17
</div>
</div>
<div class="row">
<div class="cell1" id="num22">
18
</div>
<div class="cell1" id="num23">
19
</div>
<div class="cell1" id="num24">
20
</div>
<div class="cell1" id="num25">
21
</div>
<div class="cell1" id="num26">
22
</div>
<div class="cell1" id="num27">
23
</div>
<div class="cell1" id="num28">
24
</div>
</div>
<div class="row">
<div class="cell1" id="num29">
25
</div>
<div class="cell1" id="num30">
26
</div>
<div class="cell1" id="num31">
27
</div>
<div class="cell1" id="num32">
28
</div>
<div class="cell1" id="num33">
29
</div>
<div class="cell1" id="num34">
30
</div>
<div class="cell1" id="num35">
31
</div>
</div>
</div>
</form>
</body>
</html>
/*******Now code behing web method i named it as calender.aspx.cs********************************/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string INSERT_RECORD(string day,int date)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["TestConString"].ToString());
try
{
string query = ("INSERT INTO [Dtselections]([selDate],[selDay])" +
"VALUES (@Date,@Day)");
SqlCommand cmd = new SqlCommand(query, con);
cmd.Parameters.AddWithValue("@Day", day);
cmd.Parameters.AddWithValue("@Date",date);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
return "Success";
}
catch (Exception )
{
return "failure";
}
}
}