javascript - Change div color on checking all check boxes in hidden form -


have several problems , can't find solution. code https://jsfiddle.net/46qybyrh/2/

upper table html 

<div class="block"> <table>     <tr>         <th>nr.</th>         <th style="width: 200px">task</th>         <th>progresas</th>         <th></th>     </tr>     <tr>         <td>1</td>         <td>air port scedules</td>         <td>0/3</td>         <td>             <button onclick="showdiv()">expand</button>         </td>     </tr> </table>

hidden div

<div id="popup" class="popupbox">     <table class="block">         <tbody>         <tr>             <td></td>             <form>                 <td>xml</td>                 <td>                     <span>comment</span><br>                     <textarea></textarea>                 </td>                 <td>                     <span>deadline</span>                     <input type="date" value="2017-08-24">                 </td>                 <td>done:<input type="checkbox"></td>                 <td><input type="submit" value="apply"></td>             </form>         </tr>         <tr>             <td></td>             <form>                 <td>scedules</td>                 <td>                     <span>comment</span><br>                     <textarea></textarea>                 </td>                 <td><span>deadline</span>                     <input type="date" value="2017-08-10">                 </td>                 <td>done:<input type="checkbox"></td>                 <td><input type="submit" value="apply"></td>             </form>         </tr>         <tr>             <td></td>             <form>                 <td>infobox</td>                 <td>                     <span>comment</span><br>                     <textarea></textarea>                 </td>                 <td><span>deadline</span>                     <input type="date" value="2017-08-14">                 </td>                 <td>done:<input type="checkbox"></td>                 <td><input type="submit" value="apply"></td>             </form>         </tr>         </tbody>     </table>     <button onclick="hidediv()">close</button></div>

main aims of code should be:

  1. when press apply on each row, hidden div should not hide. information comment, date, check box should change.
  2. when 3 check boxes selected, upper tables first row (1 air port scedules 0/3) should change background color.
  3. if deadline close (let 5 days till deadline) entire row should change background color.
  4. if deadline passed entire row should change background color.

i know lot ask maybe of guide me on each of steps.

i took fiddle , put codepen , messed around while. able wanted lot of jquery. learn jquery, try www.w3schools.com/jquery.

here codepen: https://codepen.io/pen/ojxzje

in few short steps:

  • i removed <form> tags, <input type='submit'>, , <tbody> make code cleaner (the submit button causing problems hiding div mentioned @angelol.
  • i reformatted lower table bit make cleaner jquery work nicely. (i added header row , removed text blocks)
  • i included jquery library
  • i renamed jquery functions , created 1 more (open(), close(), , apply(). called buttons respectively.
  • inside open() function, showed rows in second table class if items-[id of list in]. way there clean list of of tasks instead of having new table every new list.
  • the open() function changes button expand hide calls close function.
  • the close() function hides second table , changes name of button expand.
  • the apply() function run whenever press apply button. performs 2 checks:
    • checks of checkboxes in table rows labeled .details-[id working with] , if checked, selects list's row in upper table. adds green color background.
    • it finds dates , compares them today's date (thanks again @angelol. if date within 5 days, selects row date on , changes color. if date has passed or today, colors row red.

it's lot of code , bunch of reorganization, let me know if having trouble understanding , can walk through steps.


Comments

Post a Comment

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m...
Read more

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -

here tables: create table customer ( cid int primary key, name varchar(32) ) create table ord ( oid int primary key, cid int foreign key references customer, address varchar(20) ) here's linq-to-sql statement: var aaa = c in db.customer select new { c, o = c.ord.tolist() }; and here's inexplicable query generated linq-to-sql: select [t0].[cid] [cid], [t0].[name] [name], [t1].[oid] [oid], [t1].[cid] [cid2], [t1].[address] [address], (select count(*) [dbo].[ord] [t2] [t2].[cid] = [t0].[cid]) [value] [dbo].[customer] [t0] left outer join [dbo].[ord] [t1] on [t1].[cid] = [t0].[cid] order [t0].[cid], [t1].[oid] i want understand how rid of count(*) part. it's entirely uncalled for! linq needs count(*) in order determine number of entries returned o = c.ord.tolist() .
Read more