使用HTML表格和CSS3显示项目状态

时间：2017-08-02 10:03:12

标签： javascript html5 twitter-bootstrap css3

我想跟踪一些项目的状态，如下图所示： Progress bar

活动1/2/3将从数据源获取一些数据，并包含startdate和enddate。

我正在使用的表格是使用bootstrap格式化的。进度条形码（css，html，javascript）来自stackoverflow问题here（感谢优秀的帖子和答案）

但是，根据我收到的数据，我无法将帖子中的表和css结合起来显示进度条。任何帮助都将受到高度赞赏。

以下是我尝试Fiddle Code

的内容 

$(function() {
  $('.progress>div').each(function() {
    $(this).css('width', $(this).data('progress'));
  });
});
* {
  box-sizing: border-box;
}

body {
  background: white;
}

.project {
  width: 1000px;
  margin-bottom: 1em;
}

.project>div {
  display: inline-block;
  margin: 0 -5px 0 0;
  vertical-align: middle;
}

.task {
  width: 2em;
  height: 2em;
  border: .4em solid #E4E4E7;
  background: #E4E4E7;
  border-radius: 100%;
}

.progress {
  width: calc( 50% - 3em);
  height: .6em;
  padding: .2em 0;
  background: #E4E4E7;
  position: relative;
}

.progress>div {
  height: .2em;
  left: -.4em;
  right: -.4em;
  position: absolute;
}

.pending {
  background: #F8AC59;
}

.running {
  background: #1C84C6;
}

.passed {
  background: #1AB394;
}

.failed {
  background: #ED5565;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Activity</th>
      <th colspan="4" class="text-center">Jan-17</th>
      <th colspan="4" class="text-center">Feb-17</th>
      <th colspan="4" class="text-center">Mar-17</th>
      <th colspan="4" class="text-center">Apr-17</th>
      <th colspan="4" class="text-center">May-17</th>
      <th colspan="4" class="text-center">June-17</th>
      <th colspan="4" class="text-center">July-17</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Activity 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <div class="task passed" title="Task completed"></div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Activity 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Activity 3</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分：1)

如果您的表格单元格的宽度始终相同，那么您可以这样做。它并不完美，但会让你知道如何得到你所要求的东西。

对HTML的唯一更改是，我在任务div上添加了data-length="<NUMBER>"。数字是任务将跨越的表列数。

＆＃13;
＆＃13; 
$(function () {
  $('.progress > div').each(function () {
    $(this).css('width', $(this).data('progress'));
  });
});
＆＃13; 
* {
    box-sizing: border-box;
}

body {
    background: white;
}

/*Start New Added Styles*/

/*Needed for the absolute positioned bars.*/
td {
    position: relative;
}

/*Needed to make the table columns the same size.*/
table {
    table-layout: fixed;
}

/*Center the left side circle in the table cell.*/
div[data-length] {
    margin-left: 25%;
}

/*The spanning bar.*/
div[data-length]:before {
    content: " ";
    z-index: -1;
    display: block;
    position: absolute;
    height: 8px;
    top: 50%;
    transform: translate(0,-50%);
}

/*The circle at the end of the spanning bar.*/
div[data-length]:after {
    content: " ";
    z-index: 1;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
    width: 2em;
    height: 2em;
    border: .4em solid #E4E4E7;
    background: #E4E4E7;
    border-radius: 100%;
}

/*Passed colour styles for the spanning bar.*/
div.passed[data-length]:before {
    background: #1AB394;
    border-top: 2px solid #E4E4E7;
    border-bottom: 2px solid #E4E4E7;
}

/*Passed colour styles for the circle at the end of the spanning bar.*/
div.passed[data-length]:after {
    background: #1AB394;
}

/*The bar that will span 10 table columns.*/
div[data-length='10']:before {
    width: calc(900% + 1em);
}

/*The circle at the end of the 10 spanning bar.*/
div[data-length='10']:after {
    left: calc(900% + 2em);
}

/*The bar that will span 3 table columns.*/
div[data-length='3']:before {
    width: calc(200% + 1em);
}

/*The circle at the end of the 3 spanning bar.*/
div[data-length='3']:after {
    left: calc(200% + 2em);
}

/*End New Added Styles*/

.project {
    width: 1000px;
    margin-bottom: 1em;
}

.project > div {
    display: inline-block;
    margin: 0 -5px 0 0;
    vertical-align: middle;
}

.task {
    width: 2em;
    height: 2em;
    border: .4em solid #E4E4E7;
    background: #E4E4E7;
    border-radius: 100%;
}

.progress {
    width: calc(50% - 3em);
    height: .6em;
    padding: .2em 0;
    background: #E4E4E7;
    position: relative;
}

.progress > div {
    height: .2em;
    left: -.4em;
    right: -.4em;
    position: absolute;
}

.pending {
    background: #F8AC59;
}

.running {
    background: #1C84C6;
}

.passed {
    background: #1AB394;
}

.failed {
    background: #ED5565;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th colspan="2">Activity</th>
                <th colspan="4" class="text-center">Jan-17</th>
                <th colspan="4" class="text-center">Feb-17</th>
                <th colspan="4" class="text-center">Mar-17</th>
                <th colspan="4" class="text-center">Apr-17</th>
                <th colspan="4" class="text-center">May-17</th>
                <th colspan="4" class="text-center">June-17</th>
                <th colspan="4" class="text-center">July-17</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">Activity 1</td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <div class="task passed" title="Task completed"></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">Activity 2</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <div class="task passed" title="Task completed" data-length="10"></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <div class="task passed" title="Task completed" data-length="3"></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">Activity 3</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题