I want to set current time line(if possible auto move after every 10 minutes) in html table with red color

Question

I am using this html table , i want to set current time line in html td. For example current time is 9 AM then set current time line on 9 AM column if time is 10 AM then current time line move to next column.Please help me if any plugin related to this task tell me.Thanks in advance.

<div class="table-responsive custom">
    <div class="col-sm-1 mov_div"></div>
        <table class="table table-bordered ">
            <thead>        
                 <tr>                                      
                    <th></th>
                    <th><p>Queed</p></th>
                    <th><p>7:00</p></th>
                    <th><p>8:00</p></th>
                    <th><p>9:00</p></th>
                    <th><p>10:00</p></th>
                    <th><p>11:00</p></th>
                </tr>
            </thead>
            <tbody class="context-menu-one">
                <!--  <tr> </tr> -->
                 <tr>
                    <td>data1</td>
                    <td></td>
                    <td><img id="vesselIcon1" src="vesselsIcon/vess-arriving.gif" style= "width:90px;"/></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>Some Content</td>
                </tr>
                <tr>
                    <td>data2</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><img id="vesselIcon2" src="vesselsIcon/vess-arriving.gif" style= "width:90px;"/></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                     <td>data 3</td>
                     <td></td>
                     <td></td>
                     <td><img id="vesselIcon3" src="vesselsIcon/vess-arriving.gif" style= "width:90px;"/></td>
                     <td></td>
                     <td></td>
                     <td></td>
                </tr>
          </tbody>
       </table>
  </div>

My html table like this image

I Want like time line like below image

Where is the code you've tried to get this line showing? Please publish your javascript. — jmargolisvt, Sep 01 '17 at 16:13
I am just try to add line through css . You have any idea how to to in java script. — Naresh Kumar, Sep 01 '17 at 16:37
You will need to work with the Date object or if you want a library, look into moment.js. Add the line and move it accordingly at an appropriate interval. — jmargolisvt, Sep 01 '17 at 16:46

artgb · Answer 1 · 2017-09-01T17:46:30.367

1

You can use line class div. Please try this code.

 .line{
    z-index:20;
    position:absolute;
    left:100;
    width: 2px;
    height: 200px;
    border-right: 2px solid green;
    position: absolute;
  }

  <div class="line"></div>

edited Sep 01 '17 at 17:46

answered Sep 01 '17 at 16:49

artgb

3,177
6
19
36

your css ok for line , but i want to that line move with table when i scroll . – Naresh Kumar Sep 01 '17 at 17:30
1

you can edit style in javascript, when scroll you can change the left style of that class – artgb Sep 01 '17 at 17:48
Yes its work for me , when i change style in javascript – Naresh Kumar Sep 05 '17 at 05:35

score 0 · Accepted Answer · answered Aug 15 '20 at 12:05

Solved this problem using jQuery setTimeout function. Added line and In every one-minute moving the line using setTimeout function.

setTimeout( function() {
    // code
  }, 1000 );

Useful links for setTimeout.

I want to set current time line(if possible auto move after every 10 minutes) in html table with red color

2 Answers2