帮助中心

自定义带指示器的H5表格效果

浏览：740次- 评论：1次- 发布时间：2018-07-13

Html

Css

...
单位：元
负数发票
未开票
已开票
已作废
正数发票
未开票
已开票
已作废
合计

0.06
金额	税额	商品
700	1200	2100
100	200	300
200	400	600
400	800	1200
700	1200	2100
100	200	300
200	400	600
400	800	1200
1400	2400	4200

0.13
金额	税额	商品
700	1200	2100
100	200	300
200	400	600
400	800	1200
700	1200	2100
100	200	300
200	400	600
400	800	1200
1400	2400	4200

汇总
金额	税额	商品
0	0	0
0	0	0
0	0	0
0	0	0
0	0	0
0	0	0
0	0	0
0	0	0
0	0	0

#container,#tip-board {
	font-family:"微软雅黑";
}
#container {
	display:flex;
	width:98%;
	/*height:500px;
	*/
			/*border:1px solid red;
	*/
}
.content {
	display:flex;
	/*border:1px solid red;
	*/
}
#content-view1 {
	flex-grow:1;
}
#content-view2 {
	flex-grow:12;
}
#content-view3 {
	flex-grow:4;
}
table {
	/*width:100%;
	*/
}
#content-view2 div {
	flex-grow:1;
}
#content-view3 div {
	flex-grow:1;
}
#content-view2 table tr:nth-child(1) th,#content-view2 table tr:nth-child(2) th {
	text-align:center;
}
#content-view3 table tr:nth-child(1) th,#content-view3 table tr:nth-child(2) th {
	text-align:center;
}
td {
	text-align:right;
}
#content-view2 td:hover,#content-view3 td:hover {
	cursor:pointer;
	background-color:yellow;
}
.row-r th {
	text-align:right;
}
.link-row th:hover {
	cursor:pointer;
	background-color:#18E690;
}
#x-indicator,#y-indicator,#tip-board {
	position:absolute;
}
#x-indicator {
	top:0;
	left:0;
	width:300px;
	height:2px;
	border:1px dashed red;
}
#y-indicator {
	top:0;
	left:0;
	width:2px;
	height:300px;
	border:1px dashed red;
}
#tip-board {
	width:145px;
	height:100px;
	background-color:#fff;
	border:1px solid #ccc;
	display:none;
	padding-left:5px;
}

function f() {
    window.print();
}

changeXYIndicator(e);
        setTipBoard(this, judgeXY(this));

// },1000);

} else {
        resetXYIndicator();
        $('#tip-board').hide();
    }

});

function setTipBoard(_self, arr) {
    $('#cell-v').text($(_self).text());
    $('#cell-r').text(arr[0] + '-' + arr[1]);
    $('#cell-c').text(arr[2] + '-' + arr[3]);
    $('#tip-board').show();
}

function resetXYIndicator() {
    $('#x-indicator').css({
        top: 0,
        width: '300px'
    });
    $('#y-indicator').css({
        left: 0,
        height: '300px'
    });
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3