我想在 html table 中用红色设置当前时间线（如果可能的话，每 10 分钟自动移动一次）

Question

我正在使用这个 html table ，我想在 html td 中设置当前时间线。例如，当前时间是上午 9 点，然后在上午 9 点列设置当前时间线，如果时间是上午 10 点，则当前时间线移至下一个 column.Please 如果与此任务相关的任何插件提前告诉 me.Thanks，请帮助我.

<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>

我的htmltable喜欢这张图片

我想要像下图这样的时间线

Answer 1

您可以使用行 class div。请尝试此代码。

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

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

Answer 2

使用 jQuery setTimeout 函数解决了这个问题。添加行并在每个 one-minute 中使用 setTimeout 函数移动行。

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

setTimeout 的有用链接。

How to wait 5 seconds with jQuery?
https://api.jquery.com/deferred.promise/

我想在 html table 中用红色设置当前时间线（如果可能的话，每 10 分钟自动移动一次）

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

html

javascript

css

jquery

jquery-plugins