需要帮助创建清单并突出显示行HTMLJavascript
Need help creating a checklist and highlighting rows HTML Javascript
我正在创建一个检查表，我想知道是否有一种方法可以通过多次单击来突出显示行。因此，当你完成一项任务时，你会单击该行，它会更改颜色，以指示通过多次单击部分完成或完全完成。此外，由于它将是一个检查表，将同时选择多个列。
例如：第一次单击将行更改为黄色，第二次单击将该行更改为绿色，然后第三次单击取消选择该行。
这可能吗？我似乎想不通。
谢谢。
这是我的代码我有
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CS Traffic Control</title>
<style type="text/css">
body {
background: #f0f0f0;
margin: 0;
padding: 0;
font: 12px Normal Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 425px; margin: 0px;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 8px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 0px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.checklist
{
margin: 0 auto;
background: #FFFFFF;
font: Normal 13px Arial;
color: #000000;
text-align: left;
top: 0px;
left: 0px;
}
.checklist .listItem
{
font: Normal 12px Arial;
border: solid 1px #CCCCCC;
background: #eefbfd;
position: relative;
height: 15px;
padding: 4px;
padding-left: 6px;
}
.checklist .listItem2
{
font: Normal 12px Arial;
border: solid 1px #CCCCCC;
background: #fdf0ed;
position: relative;
height: 15px;
padding: 4px;
padding-left: 6px;
}
.checklist .listItem3
{
font: Normal 12px Arial;
border: solid 1px #CCCCCC;
background: #edfdf7;
position: relative;
height: 15px;
padding: 4px;
padding-left: 6px;
}
.checklist .highlight
{
border: solid 1px #006600;
background: #99CC33;
}
.checklist .label
{
font: Bold 12px Arial;
border: solid 1px #999999;
background: #CCCCCC;
position: relative;
height: 15px;
padding: 2px;
padding-left: 6px;
}
.checklist .label2
{
font: Bold 12px Arial;
border: solid 1px #999999;
background: #CCCCCC;
position: relative;
height: 15px;
padding: 2px;
padding-left: 6px;
}
.checklist .label3
{
font: Bold 12px Arial;
border: solid 1px #999999;
background: #CCCCCC;
position: relative;
height: 15px;
padding: 2px;
padding-left: 6px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li class="active"><a href="#tab1">Pre-Event</a></li>
<li class=""><a href="#tab2">Event Monitoring</a></li>
<li class=""><a href="#tab3">Presentation Manager Training</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content" style="display: block;">
<div class="checklist">
<div class="label">The 24 Before</div>
<div class="listItem">Verify Conference Reservation Matches Event date/time</div>
<div class="listItem">Verify Passcode on conference reservation matches</div>
<div class="listItem">Verify You Show up in Report URL</div>
<div class="listItem">Is There a Non-Streaming Option?</div>
<div class="listItem">Does EM Date Time Match CSS Calendar Invite Date/Time?</div>
<div class="listItem">Select Your Name As Event Monitor In Event Manager</div>
<div class="label">Console Check</div>
<div class="listItem">All Elements are functional</div>
<div class="listItem">Download Slides Match Uploaded Slides</div>
<div class="listItem">Presenter Pictures Appear</div>
<div class="listItem">Check Spelling/Grammar</div>
<div class="listItem">Audio Events Have Media Player</div>
<div class="listItem">Video Events have Video Window</div>
<div class="listItem">Is it Go-Live Ready?</div>
<div class="label">Presentation Manager Check</div>
<div class="listItem">Verify Elements are uploaded</div>
<div class="listItem">Push out elements to make sure they display in Audience Console</div>
<div class="listItem">Do URLs Launch Correctly?</div>
<div class="listItem">Do Polls Launch Correctly?</div>
<div class="listItem">Does Screen Share Launch Correctly?</div>
<div class="label">Registration</div>
<div class="listItem">Did you get registration confirmation email?</div>
<div class="listItem">Does registration page look Go-Live Ready?</div>
<div class="listItem">Does Date/Time match event Date/Time?</div>
<div class="label">Escalation</div>
<div class="listItem">Post Comment in SFDC Case Pre-Check Complete</div>
<div class="listItem">Telco - reservation is incorrect (date.time/faa passcode)</div>
<div class="listItem">Event is FAA but EM Shows FAB</div>
<div class="listItem">Post comment for WCM if anything is missing or incorrect</div>
<div class="listItem">Do you understand the event profile and event flow?</div>
</div>
</div>
<div id="tab2" class="tab_content" style="display: none;">
<div class="checklist">
<div class="label2">Event Start-Up</div>
<div class="listItem2">Log into Event using URLs from WCC</div>
<div class="listItem2">Verify Elements are Go-Live Ready</div>
<div class="listItem2">Enter Dial-in Information in Chat</div>
<div class="listItem2">Verify You Are Selected as Event Monitor in EM</div>
<div class="listItem2">Open Preview URL and Verify it's Go-Live Ready</div>
<div class="listItem2">Launch Audience URL and Verify Lobby Page opens</div>
<div class="listItem2">Dial Out to Bridge</div>
<div class="listItem2">Hit Start at Transition</div>
<div class="listItem2">Push Out First Element</div>
<div class="label2">Telco</div>
<div class="listItem2">Log into Operator Chat</div>
<div class="listItem2">Confirm FAA Passcode</div>
<div class="listItem2">Confirm Title</div>
<div class="listItem2">Confirm Standbys at 15,10,5,2 min</div>
<div class="listItem2">Confirm Test Standby on Stream</div>
<div class="listItem2">Confirm Open Lines</div>
<div class="listItem2">Confirm Operator Understands Event Flow</div>
<div class="listItem2">Provide Dial-Out Numbers for Presenters</div>
<div class="listItem2">Confirm Start Time</div>
<div class="label2">Presenters</div>
<div class="listItem2">Confirm Each Person Roll</div>
<div class="listItem2">Confirm Open Lines</div>
<div class="listItem2">Perform Sound Checks</div>
<div class="listItem2">Confirm Elements are in correct order</div>
<div class="listItem2">Verify Screen Share is Functional</div>
<div class="listItem2">Review Transition to Live Event Start</div>
<div class="listItem2">Confirm Event Start Time</div>
<div class="listItem2">Identify Backup Slide Pusher</div>
<div class="listItem2">Remind to Stay On Call for Post-call Wrap-up</div>
<div class="listItem2">Confirm Phone Numbers for Presenters</div>
<div class="label2">Best Practices</div>
<div class="listItem2">Slide Deck Printed Out</div>
<div class="listItem2">Something to Drink Handy</div>
<div class="listItem2">Silence all devices</div>
<div class="listItem2">Do Not Use Mute Function</div>
<div class="listItem2">Stay aware of Chat Window</div>
<div class="listItem2">ON24 Answers All Tech Questions</div>
</div>
</div>
<div id="tab3" class="tab_content" style="display: none;">
<div class="checklist">
<div class="label3">Pre-Call</div>
<div class="listItem3">Verify Elements are Go-Live Ready</div>
<div class="listItem3">Enter Dial-in Information in Chat</div>
<div class="listItem3">Launch Arkadin Audio Console</div>
<div class="listItem3">Label Incoming Caller Lines in Arkadoin Audio Console</div>
<div class="label3">Review Login Mode(s)</div>
<div class="listItem3">Review Login Page</div>
<div class="listItem3">Log in as Moderator</div>
<div class="listItem3">Changing Mode(s) via menu</div>
<div class="label3">Managing Elements</div>
<div class="listItem3">Review Present Tab - PM Classic</div>
<div class="listItem3">Review Storyboard - PMXD</div>
<div class="listItem3">Preview Window</div>
<div class="listItem3">Live View Window</div>
<div class="listItem3">Previewing Elements</div>
<div class="listItem3">Pushing Elements using Buttons</div>
<div class="listItem3">Manually Pushing Elements</div>
<div class="label3">Polls/URLs/Flash Clips</div>
<div class="listItem3">How to distinguish each</div>
<div class="listItem3">Poll Question V Poll Result</div>
<div class="listItem3">Pushing URLs</div>
<div class="label3">Screen Share</div>
<div class="listItem3">Default Window Size</div>
<div class="listItem3">How to Select Yourself as Presenter</div>
<div class="listItem3">Framing up Share Portion</div>
<div class="listItem3">Activating Screen Share</div>
<div class="listItem3">Pausing Screen Share</div>
<div class="listItem3">Stopping Screen Share</div>
<div class="label3">Team Chat</div>
<div class="listItem3">Chats are Logged</div>
<div class="listItem3">PVT Messages v Public Messages</div>
<div class="listItem3">Audience Cannot See Chat</div>
<div class="listItem3">BP - Keep Eye on Chat Window During Event</div>
<div class="label3">Q&A</div>
<div class="listItem3">All Questions are logged</div>
<div class="listItem3">ON24 answers all tech Q's</div>
<div class="listItem3">Incoming Q ordered numerically with medium priority</div>
<div class="listItem3">Highest ID# is most recent question</div>
<div class="listItem3">Identifying Who Submitted Question</div>
<div class="listItem3">Prioritizing Questions</div>
<div class="listItem3">Hiding Answered Questions</div>
<div class="listItem3">Creating Folders - PMXD</div>
<div class="listItem3">Assigning Questions to Presenters</div>
<div class="listItem3">Utilities Column - PM Classic</div>
<div class="listItem3">Refresh Button - PM Classic</div>
<div class="listItem3">Answered Tab - PM Classic</div>
<div class="label3">Best Practices</div>
<div class="listItem3">Log into PM 30 min prior to event start time</div>
<div class="listItem3">Use a Handset Connected to Landline Phone</div>
<div class="listItem3">Printout of Slides</div>
<div class="listItem3">Silence All Devices</div>
<div class="listItem3">Stay aware of chat window</div>
<div class="listItem3">Do Not Use Mute function on Phone</div>
<div class="listItem3">Something to drink handy</div>
<div class="listItem3">Delegating Backup Slide Pusher</div>
<div class="listItem3">Verbal Cue if Needing Assistance</div>
</div>
</div>
<script>
$("div").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body></html>
您非常接近
更改最后一个分区的onclick。
$("div.listItem").click(function () {
var $this=$(this);
if($this.hasClass("half"))
{
$this.removeClass("half").addClass("highlight");
}
else if ($this.hasClass("highlight"))
{
$this.removeClass("highlight");
}
else{
$this.addClass("half");
}
});
也添加了这个css。
.checklist .half
{
border: solid 1px #006600;
background: #ffff00;
}
你可以在这里查看演示。
有这样的吗？
$("tr").click(function() {
var color = $(this).css("background-color");
switch(color) {
case "yellow":
$(this).css("background-color", "green");
break;
case "green":
$(this).css("background-color", "white");
break;
defalut:
$(this).css("background-color", "yellow");
break;
}
});
实际上有很多方法可以做到这一点。这只是一个。这也是你的出发点。
假设您使用的是具有表布局的表/div：
$('#checklist-table tr').on('click', function () {
var $row = $(this);
if ($row.hasClass('half-click')) {
$row.removeClass('half-click').addClass('full-click'); // Half check to full check
}
else if ($row.hasClass('full-click')) {
$row.removeClass('full-click'); // Back to no check
}
else {
$row.addClass('half-click'); // No check to half check
}
});
我更喜欢使用类进行样式设置，这样你就可以很容易地在css中更改颜色等，而不是在未来中需要更改颜色时深入研究javascript。
相关文章：
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示，在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript）:从图片库(除了文件选择器）显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 有时数据是't显示在浏览器中
- 当鼠标悬停在文本中的单词上时显示警报
- 角度图表;t显示在我的页面中
- 在jquery中为显示/隐藏设置cookie
