<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/tx.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.4.0.js"></script>
    <script src="/static/js/axios.min.js"></script>

    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- colspan="4"  -->
        <!-- 内容 -->
        <!-- container这个类是设置居中对齐 -->
        <div class="container">
            <!-- row这个类是用于设置取消内边距 -->
            <div class="caption">广州天玺生产配料/投料</div>
            <div class="condition">
                <div class="condition_left navbar-left">
                    <label>
                        <div class="navbar-nav font">制令单号</div>
                        <div class="navbar-nav font"><input type='text' class="input form-control"/></div>
                        <div class="navbar-nav font"><button class="btn btn-primary">查询</button></div>
                    </label>
                    <label>
                        <div class="navbar-nav font">制令单号</div>
                        <div class="navbar-nav font"><input type='text' class="input form-control"/></div>
                        <div class="navbar-nav font"><button class="btn btn-primary">新增</button></div>
                    </label>
                </div>
                <!-- navbar-right  -->
                <div class="condition_right navbar-right">
                    <label>
                        <div class="navbar-nav font"><button class="btn btn-primary">保存配方</button></div>
                    </label>
                    <label>
                        <div class="navbar-nav font"><button class="btn btn-primary">却投料</button></div>
                    </label>
                    <label>
                        <div class="navbar-nav font"><button class="btn btn-primary">日志</button></div>
                    </label>
                </div>
            </div>
            <table class="table table-bordered aout" id="table1">
                <thead>
                    <tr>
                        <th>品牌</th>
                        <th colspan="2"></th>
                        <th >产品名称</th>
                        <th colspan="4"></th>
                        <th colspan="1">计划量KG</th>
                        <th colspan="2"></th>
                        <th>实称产量KG</th>
                        <th colspan="3"></th>
                    </tr>
                    <tr>
                        <th>配方号</th>
                        <th colspan="2">迪奥a007</th>
                        <th >设备</th>
                        <th colspan="3"></th>
                        <th>计划日期</th>
                        <th colspan="3"></th>
                        <th>生产日期</th>
                        <th colspan="3"></th>
                    </tr>
                    <tr>
                        <th>配料人员</th>
                        <th colspan="2"></th>
                        <th >配料时间</th>
                        <th colspan="3"></th>
                        <th>投料人员</th>
                        <th colspan="3"></th>
                        <th>投料时间</th>
                        <th colspan="3"></th>
                    </tr>
                    <tr>
                        <th colspan="1" style="height: 40px;">生产工艺</th>
                        <th colspan="14">
                            <textarea rows="3" cols="150">
                                我是一个文本框。
                                </textarea>
                        </th>
                    </tr>
                    <tr>
                        <th colspan="7">配方表</th>
                        <th colspan="4">配料表</th>
                        <th colspan="4">投料表</th>
                    </tr>
                    <tr>
                        <th>序号</th>
                        <th>相位</th>
                        <th>原料编码</th>
                        <th>配比%</th>
                        <th>生产量KG</th>
                        <th>库位</th>
                        <th>库存量</th>
                        <th>实称量KG</th>
                        <th>原料批号</th>
                        <th>称料人</th>
                        <th>复合人</th>
                        <th>投料量KG</th>
                        <th>投料人</th>
                        <th>复合人</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>

        jQuery.fn.rowspan = function (colIdx) { //封装的一个JQuery小插件
            return this.each(function () {
                var that;
                $('tr', this).each(function (row) {
                    $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                        if (that != null && $(this).html() == $(that).html()) {
                            rowspan = $(that).attr("rowSpan");
                            if (rowspan == undefined) {
                                $(that).attr("rowSpan", 1);
                                rowspan = $(that).attr("rowSpan");
                            }
                            rowspan = Number(rowspan) + 1;
                            $(that).attr("rowSpan", rowspan);
                            $(this).hide();
                        } else {
                            that = this;
                        }
                    });
                });
            });
        }
        $(function () {
            $("#table1").rowspan(0);//传入的参数是对应的列数从0开始  第一列合并相同
            // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同
        });
    </script>
</body>

</html>