Нужна помощь в создании контрольного списка и выделении строк HTML Javascript

0

Я создаю контрольный список, и мне интересно, есть ли способ выделить строки с несколькими щелчками. Поэтому, когда вы выполняете задачу, вы будете щелкать по строке, и она изменит цвет, чтобы указать, что это частично или полностью завершено несколькими нажатиями. Кроме того, поскольку это будет контрольный список, будут выбраны сразу несколько столбцов.

Например: при первом щелчке измените строку желтым цветом, при втором щелчке измените строку зеленым цветом, а затем на третьем клике отмените выбор строки.

Это возможно? Кажется, я не понимаю.

Благодарю.

Это мой код, который у меня есть

 <!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 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>
  • 0
    поделитесь тем, что вы пробовали
  • 1
    Да, это вполне возможно. Документ JQuery дает вам действительно хороший обзор событий, которые вы можете использовать.
Показать ещё 4 комментария
Теги:

3 ответа

0
Лучший ответ

вы были очень близки

измените onclick последнего div.

$("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;
}

вы можете проверить демо здесь.

Поделиться
  • 0
    Большое спасибо, я знал, что был близок, просто потерял сознание и застрял.
  • 0
    Итак, это работает на первой вкладке, но когда я нажимаю на другие вкладки, это не так.
Показать ещё 1 комментарий
0

Предполагая, что вы используете таблицу /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, если вам нужно изменить цвета в будущем

Поделиться
0

Что-нибудь вроде этого?

$("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;
    }
});

На самом деле есть много способов сделать это. Это всего лишь одно. Это также служит отправной точкой для вас.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню