2020-2-15技术积累-时间插件-前端获取后端数据生成表格

1.一种时间插件的用法
WdatePicker使用方法
https://blog.csdn.net/wuyan1001/article/details/78561363
https://blog.csdn.net/xm393392625/article/details/81705419
https://blog.csdn.net/u014362882/article/details/99562876
适用于不同的时间类型

2.Javascript中获取时间new Date()详细介绍
https://blog.csdn.net/zhanggaofeixy/article/details/52153110

3.前台如何通过JQuery获取后台的JSON数据，并输出到表格中
https://bbs.csdn.net/topics/390977089

<style>
    .table{
        width:100%;
        max-width: 100%;
    }
    .table>thead>tr{
        background: #edf7ff;
    }
    .table>thead>tr>th {
        white-space: nowrap;
        padding: 8px;
        line-height: 1.42857143;
    }

    .table>tbody>tr:nth-child(odd){
         background: #fff;
     }
    .table>tbody>tr:nth-child(even){
        background: #f7f7f7;
    }
    .table>tbody>tr:hover{
        background: #e3ecfc;
    }
    .table-cont{
        /**make table can scroll**/
        max-height: 500px;
        overflow: auto;
        /** add some style**/
        /*padding: 2px;*/
        background: #ddd;
        margin: 20px 10px;
        border: 1px solid #ddd;
    }
</style>

测试按钮

        <th>宽度</th>
        <th>厚度</th>
        <th>板坯宽度</th>
        <th>板坯厚度</th>
        <th>板坯长度</th>

        <th>板坯重量</th>
        <th>板坯校重</th>
        <th>成品重量</th>
        <th>取样标示</th>
        <th>装钢温度</th>

        <th>在炉时间</th>
        <th>出钢温度</th>
        <th>RDT</th>
        <th>FDT</th>
        <th>热卷箱标识</th>

        <th>道次</th>
        <th>换辊分摊</th>
        <th>待温待时间</th>
        <th>故障时间</th>
        <th>计划轧制节奏</th>

        <th>轧制节奏</th>
        <th>轧制系数</th>
        <th>预算成材率</th>
        <th>计划成材率</th>
        <th>计划燃耗</th>

        <th>计划电耗</th>
        <th>成材率</th>
        <th>燃耗</th>
        <th>电耗</th>
        
       
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
      
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
       
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
       
       
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
       
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    <tr>
        <td>委托编号</td>
        <td>交易日</td>
        <td>账户编号</td>
        <td>账户名称</td>
        <td>组合编号</td>
        <td>组合名称</td>
        <td>自定义订单编号</td>
        <td>证券代码</td>
        <td>证券名称</td>
        <td>交易所</td>
        <td>价格类型</td>
        <td>委托价格</td>
        <td>委托数量</td>
        <td>委托金额</td>
        <td>买卖方向</td>
        <td>订单状态</td>
        <td>组合开平标志</td>
        <td>组合投机套保标志</td>
        <td>备兑标志</td>
        <td>报单类型</td>
        <td>今成交数量</td>
        <td>今成交金额</td>
        <td>撤成\废单数量</td>
        <td>剩余数量</td>
        <td>订单总费用</td>
        <td>报单日期</td>
        <td>委托时间</td>
        <td>最后修改时间</td>
        <td>撤销时间</td>
        <td>撤单编号</td>
        <td>操作员编号</td>
        <td>操作员名称</td>
        <td>柜台委托编号</td>
        <td>订单IP</td>
        
    </tr>
    </tbody>
</table>

序列号	生产日期	板坯号	卷号	钢种

window.onload = function(){
    var tableCont = document.querySelector('#table-cont');
    function scrollHandle (e){
        console.log(this);
        var scrollTop = this.scrollTop;
        this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
    }

    tableCont.addEventListener('scroll',scrollHandle);
}

function testButton(){
		//alert('yes');

		$.ajax({
        type: "POST",  //默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"
        url: "test.php",  //当前页地址。发送请求的地址
        data: {
            test:'6666'
        },
        success: function (data) {
          console.log(data);
		  console.log('yes');
        },
        async: true,   //true为异步请求，false为同步请求
        error: function () {
            alert("请求失败");
        }
    });

}

不正经的前端程序员

发布了90 篇原创文章 · 获赞 28 · 访问量 8万+

私信关注

2020-2-15技术积累-时间插件-前端获取后端数据生成表格

猜你喜欢