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

Posted 2023-05-09

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

【英文标题】：I want to set current time line(if possible auto move after every 10 minutes) in html table with red color

【发布时间】：2018-02-10 17:57:20

【问题描述】：

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

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

我的 html 表格像这张图片

我想要如下图所示的时间线

【问题讨论】：

你试图让这一行显示的代码在哪里？请发布您的 javascript。

我只是尝试通过 css 添加行。你知道如何在 java 脚本中使用。

您将需要使用 Date 对象，或者如果您想要一个库，请查看 moment.js。添加该行并以适当的间隔相应地移动它。

【参考方案1】：

您可以使用线类 div。 请尝试此代码。

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

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

【讨论】：

你的 css 对 line 没问题，但我想当我滚动时该 line 与 table 一起移动。

您可以在javascript中编辑样式，滚动时可以更改该类的左侧样式

是的，它对我有用，当我在 javascript 中更改样式时

【参考方案2】：

使用 jQuery setTimeout 函数解决了这个问题。使用setTimeout 函数添加行和每隔一分钟移动行。

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

setTimeout 的有用链接。

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