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

问题描述 投票：0回答：1

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

活动 1/2/3 将从数据源获取一些数据，并将包含开始日期和结束日期。

我使用的表是用 bootstrap 格式化的。进度条代码（CSS、HTML、JavaScript）来自这个问题（感谢出色的帖子和答案）。

但是，我无法根据收到的数据将帖子中的表格和 CSS 结合起来显示进度条。我怎样才能做到这一点？

这是我在这个小提琴中尝试过的：

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

javascript html twitter-bootstrap css
1个回答
1
投票

如果您的表格单元格始终具有相同的宽度，那么您可以这样做。它并不完美，但可以让您了解如何获得您所要求的东西。

对 HTML 的唯一更改是我在任务 div 上添加了 

data-length="<NUMBER>"
。数字是任务将跨越多少个表列。

$(function () {
  $('.progress > div').each(function () {
    $(this).css('width', $(this).data('progress'));
  });
});
* {
    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;
}
<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.