test/resources/views/admin/flow/extension.blade.php

@extends('admin/site/side_layout')
@section('header_extend')
    <style type="text/css">
        table.tftable {
            font-size: 12px;
            color: #333333;
            width: 100%;
            border-width: 1px;
            border-color: #729ea5;
            border-collapse: collapse;
        }

        table.tftable th {
            font-size: 12px;
            background-color: #acc8cc;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #729ea5;
            text-align: left;
        }

        table.tftable tr {
            background-color: #ffffff;
        }

        table.tftable td {
            font-size: 12px;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #729ea5;
        }

        .fenish {
            background: #0d8ddb;
            color: #fff;
        }

        #tfhover tbody tr td:nth-child(2) {
            position: relative;
            padding-left: 35px;
        }
    </style>
@endsection

@section('right')

    <table id="tfhover" class="tftable" border="1">
        <thead>
        <tr>
            <th colspan="19" style="text-align: center">
                项目逾期
            </th>
        </tr>
        <tr>
            <th>阶段【预计时间】</th>
            <th>客户原因</th>
            <th>采编原因</th>
            <th>策划师原因</th>
            <th>设计原因</th>
            <th>项目经理</th>
            <th>其他原因</th>
        </tr>
        </thead>
        <tbody>
        @foreach($stageList as $value)
            <tr>
                @if($value->expected_date)
                    <td>{{$value->title}}【{{$value->expected_date}}】</td>
                @else
                    <td>{{$value->title}}</td>
                @endif
                <td @if($value->client_cause ==1)class="fenish"@endif></td>
                <td @if($value->collection_cause ==1)class="fenish"@endif></td>
                <td @if($value->plan_cause ==1)class="fenish"@endif></td>
                <td @if($value->design_cause ==1)class="fenish"@endif></td>
                <td @if($value->project_progress_cause  ==1)class="fenish"@endif></td>
                <td @if($value->memo_cause ==1)class="fenish"@endif></td>
            </tr>
        @endforeach
        </tbody>
    </table>
@endsection

@section('footer')
    <script>

        window.onload = function () {
            var tfrow = document.getElementById('tfhover').rows.length;
            var tbRow = [];
            for (var i = 1; i < tfrow; i++) {
                tbRow[i] = document.getElementById('tfhover').rows[i];
                tbRow[i].onmouseover = function () {
                    this.style.backgroundColor = '#f3f8aa';
                };
                tbRow[i].onmouseout = function () {
                    this.style.backgroundColor = '#ffffff';
                };
            }
        };

        $('#tfhover tbody tr td:first-child').unbind('click');

    </script>
@endsection