使用标签正确显示表格

时间：2019-03-27 01:21:40

标签： javascript jquery html css tabs

我有一个带有可折叠容器的订单跟踪系统，其中包含带有不同表的选项卡。但是，每当用户单击第二个订购号并选择一个选项卡时，该表将不会显示它应该在的位置，而是显示在第一个订购号表上。例如，我选择了订单号67890并将其标签到物流中，它应该在67890行中显示物流表，但它保持不变，并在第一行中显示该表，即订单号12345。

如何显示与所选订单号和标签相对应的表格？请帮助

jQuery(document).ready(function() {
   jQuery('.closedArrow').click(function() {
         $(this).parents('tr').children('.expanded').toggle();
         $(this).parents('tr').children('.collapsed').toggle();
         $(this).toggleClass( "openArrow" );    
    });
});
</script>

<script type="text/javascript">
function addRow(){
	var table = document.getElementById("Section3_table");
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	
	
	row.insertCell(0).innerHTML = '<input type="text" name="issue[]" required/>';
	row.insertCell(1).innerHTML = '<input type="text" name="details[]" size="20" required/>';
	row.insertCell(2).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)"/>';
}	

function deleteRow(obj) {
     
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("Section3_table");
    table.deleteRow(index);
   
}
.closedArrow {
	<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->	
	padding-left: 20px;
	padding-bottom: 10px;
	padding-top: 4px; 
	cursor:pointer;
}

.openArrow {
	<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
	padding-left: 20px;
	cursor:pointer;
}

.steps {
    margin:0 0 20px;
    padding:0;
    list-style:none;
    overflow:hidden;
}

.green {
	background:#7dba00 !important; 
	color: #666666 !important;
}

.grey {
	color: #666666 !important;
}

.open .green:after  {
	border-left-color: #7dba00 !important;
}

.wrap .num.last:after {
	display:none
}
.wrap .num.last:before {
	display:none
}

.black {
	background:#000 !important; 
	color:#fff!important;
}

.open .black:after  {
	border-left-color: #000 !important; 
	color:#fff!important;
}

.steps li {
	float:left;
	position:relative;
}

.wrap {
	float:left;
}

.num {
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    background:#7dba00;
    color:#000;
    font-weight:bold;
    text-align:center;
    float:left;
    position:relative;
    margin:0 4px 0 0;
}

.num b, .steps p span {
	position:relative;
	z-index:2; 
	display:block;
}

.num:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 14px solid #fff;
    border-bottom: 14px solid #fff;
    border-left: 14px solid #7dba00;
    position:absolute;
    right:-4px;
    top:1px;
}

.steps p {
    background: #fff;
	margin: 0;
	float: left;
	height: 30px;
	line-height: 14px;
	font-size: 10px;
	width: 10em;
	padding: 0 10px 0 0px;
	text-align: center;
}


.closed .num:after {
	border-left-color:#000
}

.closed .num {
	color:#fff;
	background:#000
}

.closed .num.last:after {
	display:none
}

.open .num:after {
    border-left-color:#ccc;
    border-top-color:transparent;
    border-bottom-color:transparent;
    z-index:1;
}

.open .num:before {
    width: 0;
    height: 0;
    content:" ";
    position:absolute;
    border-top: 15px solid #fff;
    border-bottom: 15px solid #fff;
    border-left: 15px solid #7dba00;
    position:absolute;
    right:-5px;
    top:0;
    z-index:0;
}

.open .num {
	background:#ccc;
}

.open .wrap {
	border-radius:15px 0 0 15px;
	border:1px solid #7dba00;
}

li.open:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 16px solid #fff;
    border-bottom: 16px solid #fff;
    border-left: 15px solid #7dba00;
    position:absolute;
    right:0;
    top:0;
    z-index:0;
}

li.open:before {
    width: 0;
    height: 0;
    content:" ";
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 14px solid #fff;
    position:absolute;
    right:1px;
    top:1px;
    z-index:1;
}

.expanded {
	display:none;
	<!--bbackground-color: red;-->
	padding-right: 900px;
}

.tab {
	<!--background-color: yellow; -->
	<!--border: 2px solid black; -->
	border-collapse: collapse;
	box-shadow: inset 0 1px 0 #fff;
	font-size: 12px;
	line-height: 15px;
	text-align: left;
	width: 85%;
	margin-left: 230px;
}

.column {
    float: left;
    width: 25%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}
 
  
.completed span {
    background-color:NONE;
    color:#95db89;
    border:2px solid #95db89;
}

.todo span {
    background-color:none;
    color:#E1E6EB;
    border:2px solid #E1E6EB;
}
  
.list span {
	color:#58D68D;
	font-weight:500;
	font-size: 12px;
}
    
.breadcrumb-pagination div p {
    text-align:center;
    line-height:0;
    margin:30px auto 25px;
 }
    
.active p {
   border-bottom:2px solid #00abc9;
   padding-bottom:27px;
   margin-bottom:0px !important;
   color: #3c4043;
   font-weight:700;  
}

    
.completed p {
    color:#bsb7c1;
  }
 
.list p {
    color:#3c4043;
	font-weight:700;
  }

.completed span::before { 
  content: '\2713' 
}

.title{
	text-align:center;
	text-decoration: none;
	margin-left: 365px;
	color: #444;
}

table {
	border-collapse: collapse;
	box-shadow: inset 0 1px 0 #fff;	
	font-size: 15px;
	line-height: 15px;
	text-align: left;
	width: 98%;
}	

th {
	background: linear-gradient(#000000, #4d4d4d);
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #333;
	box-shadow: inset 0 1px 0 #999;
	color: #fff;
    font-weight: bold;
	padding: 10px 15px;
	position: relative;
	text-shadow: 0 1px 0 #000;	
}

th:after {
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
	content: '';
	display: block;
	height: 15%;
	left: 0;
	margin: 1px 0 0 0;
	position: absolute;
	top: 25%;
	width: 100%;
}

th:first-child {
	border-left: 1px solid #777;	
	box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
	box-shadow: inset -1px 1px 0 #999;
}

td {
	border-right: 1px solid #fff;
	border-left: 1px solid #e8e8e8;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #e8e8e8;
	padding: 8px ;
	position: relative;
	transition: all 300ms;
}

td:first-child {
	box-shadow: inset 1px 0 0 #fff;
}	

td:last-child {
	border-right: 1px solid #e8e8e8;
	box-shadow: inset -1px 0 0 #fff;
}	

tr {
	background: url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:nth-child(odd) td {
	background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}

h1 {
	color: #444;
	text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

a:hover,a:focus{
    outline: none;
    text-decoration: none;
}

.tab { 
	text-align: center;	
}

.tab .nav-tabs{
    display: inline-block;
    position: relative;
    border-bottom: none;
}

.tab .nav-tabs li{
    margin: 0;
}

.tab .nav-tabs li a{
    display: block;
    padding: 80px 25px 0 25px;
    background: #fff;
    font-size: 17px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #fff;
    margin-right: 0;
    overflow: hidden;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease 0s;
}

.tab .nav-tabs li a span {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #f2f2f2;
    margin: auto;
    font-size: 22px;
    color: #999;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    transform: rotate(45deg);
}

.tab .nav-tabs li.active a span{
    background: #29335c;
    color: #fff;
}

.tab .nav-tabs li a span i{
    transform: rotate(-45deg);
}

.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover{
    color: black;
    border: none;
    border-bottom: 2px solid #fff;
}

.tab .nav-tabs li.active a{
    border-bottom: 2px solid #29335c;
}

.tab .tab-content{
    padding: 30px 0 0 19px;
    margin-top: -5px;
    font-size: 15px;
    color: black;
    line-height: 26px;
    text-align: left;
    border-top: 1px solid #e5e5e5;
	width: 600px;
}

.tab .tab-content .tab-pane #Section3_table {
	margin-left: -8px;
}

.tab .tab-content h3{
    font-size: 24px;
    margin-top: 0;
}

@media only screen and (max-width: 479px){
    .tab .nav-tabs li{
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li:last-child{
        margin-bottom: 0;
    }
}
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
<title> Order Tracking System </title>
<center>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
<table class="bts_table">
  <tr>
    <th>ORDER NUMBER</th>
	<th>CUSTOMER NAME</th>
    <th>LOCATION</th> 
  </tr>

<form action="save.php" method="POST">
    <td valign="top"><span class="closedArrow"> 12345 </span></td>
	<td valign="top"><span class="closedArrow"> JOHN </span></td>
    <td valign="top" class="collapsed"><ol class="steps">
        <li>
                <div class="num green"><b>1</b></div>
        </li>
        <li>
                <div class="num green"><b>2</b></div>
        </li>
		<li>
                <div class="num green"><b>3</b></div>
        </li>
		<li>
                <div class="num green"><b>4</b></div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>5</b></div>
                        <p><span>SHIPPING</span><span>IN PROGRESS</span></p>
                </div>
        </li>
		<li class="closed">
                <div class="num"><b>6</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>7</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>8</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>9</b></div>
        </li>
        <li class="closed">
                <div class="num last"><b>10</b></div>
        </li>

</ol></td>
   <td colspan="2" class="expanded">
  <ol class="steps">
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>1</b></div>
                        <p><span>ORDER</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>2</b></div>
                        <p><span>PACKING</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num green"><b>3</b></div>
                        <p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>4</b></div>
                        <p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>5</b></div>
                        <p><span>SHIPPING</span><span>ONGOING</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>6</b></div>
                        <p><span>COURIER</span><span>NOT YET DONE </span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num black"><b>7</b></div>
                        <p><span>DELIVERY</span><span>NOT YET DONE </span></p>
                </div>
        
        <li class="open">
                <div class="wrap">
                        <div class="num black last"><b>10</b></div>
                        <p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
                </div>
        </li>
</ol><hr>
<div class="tableDiv">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="tab" role="tabpanel">
                <center>
                <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
					<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                </ul>
                
				
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <table border="2px">
							<tr><th>ITEM</th><th>DETAILS</th></tr>
							<tr><td>Bag</td><td>1pc; Green</td></tr>
							<tr><td>Pouch</td><td>1pc; Blue</td></tr>
							<tr><td>Necklace</td><td>1pc; Heart shape; Gold</td></tr>
							<tr><td>Shoes</td><td>1 pair; Red; Size 6</td></tr>
						</table><br><hr>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <table border="2px">
							<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
							<tr><td>NAME</td><td>John Smith</td></tr>
							<tr><td>SHIPPING ADDRESS</td><td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td></tr>
							<tr><td>TELEPHONE NUMBER</td><td>754-3010</td></tr>
						</table>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
					<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
					<table id="Section3_table" name="Section3">
					<tr><th>ISSUE</th><th>DETAILS</th></tr> 
							<tr><td></td><td></td></tr>
					</center></table><br><hr>
                    </div>
					
					
					<div role="tabpanel" class="tab-pane fade" id="Section4">
                        <table border="2px">
							<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
							<tr><td></td><td></td><td></td></tr>
						</table><br><hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<tr>
<td valign="top"><span class="closedArrow"> 67890 </span></td>
	<td valign="top"><span class="closedArrow"> JANE </span></td>
    <td valign="top" class="collapsed"><ol class="steps">
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>1</b></div>
                        <p><span>PACKING</span><span>IN PROGRESS</span></p>
                </div>
        </li>
        <li class="closed">
                <div class="num"><b>2</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>3</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>4</b></div>
        </li>
        <li class="closed">
                <div class="num"><b>5</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>6</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>7</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>8</b></div>
        </li>
		<li class="closed">
                <div class="num"><b>9</b></div>
        </li>
        <li class="closed">
                <div class="num last"><b>10</b></div>
        </li>

</ol></td>
   <td colspan="2" class="expanded">
  <ol class="steps">
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>1</b></div>
                        <p><span>ORDER</span><span>ONGOING</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>2</b></div>
                        <p><span>PACKING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num black"><b>3</b></div>
                        <p><span>CHECKING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>4</b></div>
                        <p><span>RECHECKING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>5</b></div>
                        <p><span>SHIPPING</span><span>NOT YET DONE</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>6</b></div>
                        <p><span>COURIER</span><span>NOT YET DONE</span></p>
                </div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num black"><b>7</b></div>
                        <p><span>DELIVERY</span><span>NOT YET DONE</span></p>
                </div>
        
        <li class="open">
                <div class="wrap">
                        <div class="num black last"><b>10</b></div>
                        <p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
                </div>
        </li>
</ol><hr>


<div class="tableDiv">

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="tab" role="tabpanel">
                <center>
                <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
					<li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                </ul>
                
				
                <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <table border="2px">
							<tr><th>ITEM</th><th>DETAILS</th></tr>
							<tr><td>Dress</td><td>1pc; Yellow</td></tr>
							<tr><td>Hat</td><td>1pc; Green</td></tr>
						</table><br><hr>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <table border="2px">
							<tr><th>CUSTOMER</th></th><th>DETAILS</th></tr>
							<tr><td>NAME</td><td>Jane Doe</td></tr>
							<tr><td>SHIPPING ADDRESS</td><td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td></tr>
							<tr><td>TELEPHONE NUMBER</td><td>1-541-754-3010</td></tr>
						</table>
                    </div>
					
					
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
					<center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
					<table id="Section3_table" name="Section3">
					<tr><th>ISSUE</th><th>DETAILS</th></tr> 
							<tr><td></td><td></td></tr>
					</center></table><br><hr>
                    </div>
					
					
					<div role="tabpanel" class="tab-pane fade" id="Section4">
                        <table border="2px">
							<tr><th>COURIER NAME</th><th>DATE SHIPPED</th><th>DATE ARRIVED</th></tr>
							<tr><td></td><td></td><td></td></tr>
						</table><br><hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

主要问题来自重复的ID，#Section1,#Section2,#Section3,#Section4我将第二行中的ID更改为#Section5,#Section6,#Section7,#Section8，您可以看到它有效。

注意：该ID在同一文档中必须唯一。

.closedArrow {
  <!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
  -->padding-left: 20px;
  padding-bottom: 10px;
  padding-top: 4px;
  cursor: pointer;
}

.openArrow {
  <!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
  -->padding-left: 20px;
  cursor: pointer;
}

.steps {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.green {
  background: #7dba00 !important;
  color: #666666 !important;
}

.grey {
  color: #666666 !important;
}

.open .green:after {
  border-left-color: #7dba00 !important;
}

.wrap .num.last:after {
  display: none
}

.wrap .num.last:before {
  display: none
}

.black {
  background: #000 !important;
  color: #fff!important;
}

.open .black:after {
  border-left-color: #000 !important;
  color: #fff!important;
}

.steps li {
  float: left;
  position: relative;
}

.wrap {
  float: left;
}

.num {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #7dba00;
  color: #000;
  font-weight: bold;
  text-align: center;
  float: left;
  position: relative;
  margin: 0 4px 0 0;
}

.num b,
.steps p span {
  position: relative;
  z-index: 2;
  display: block;
}

.num:after {
  content: " ";
  width: 0;
  height: 0;
  border-top: 14px solid #fff;
  border-bottom: 14px solid #fff;
  border-left: 14px solid #7dba00;
  position: absolute;
  right: -4px;
  top: 1px;
}

.steps p {
  background: #fff;
  margin: 0;
  float: left;
  height: 30px;
  line-height: 14px;
  font-size: 10px;
  width: 10em;
  padding: 0 10px 0 0px;
  text-align: center;
}

.closed .num:after {
  border-left-color: #000
}

.closed .num {
  color: #fff;
  background: #000
}

.closed .num.last:after {
  display: none
}

.open .num:after {
  border-left-color: #ccc;
  border-top-color: transparent;
  border-bottom-color: transparent;
  z-index: 1;
}

.open .num:before {
  width: 0;
  height: 0;
  content: " ";
  position: absolute;
  border-top: 15px solid #fff;
  border-bottom: 15px solid #fff;
  border-left: 15px solid #7dba00;
  position: absolute;
  right: -5px;
  top: 0;
  z-index: 0;
}

.open .num {
  background: #ccc;
}

.open .wrap {
  border-radius: 15px 0 0 15px;
  border: 1px solid #7dba00;
}

li.open:after {
  content: " ";
  width: 0;
  height: 0;
  border-top: 16px solid #fff;
  border-bottom: 16px solid #fff;
  border-left: 15px solid #7dba00;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

li.open:before {
  width: 0;
  height: 0;
  content: " ";
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 14px solid #fff;
  position: absolute;
  right: 1px;
  top: 1px;
  z-index: 1;
}

.expanded {
  display: none;
  <!--bbackground-color: red;
  -->padding-right: 900px;
}

.tab {
  <!--background-color: yellow;
  --><!--border: 2px solid black;
  -->border-collapse: collapse;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 15px;
  text-align: left;
  width: 85%;
  margin-left: 230px;
}

.column {
  float: left;
  width: 25%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.completed span {
  background-color: NONE;
  color: #95db89;
  border: 2px solid #95db89;
}

.todo span {
  background-color: none;
  color: #E1E6EB;
  border: 2px solid #E1E6EB;
}

.list span {
  color: #58D68D;
  font-weight: 500;
  font-size: 12px;
}

.breadcrumb-pagination div p {
  text-align: center;
  line-height: 0;
  margin: 30px auto 25px;
}

.active p {
  border-bottom: 2px solid #00abc9;
  padding-bottom: 27px;
  margin-bottom: 0px !important;
  color: #3c4043;
  font-weight: 700;
}

.completed p {
  color: #bsb7c1;
}

.list p {
  color: #3c4043;
  font-weight: 700;
}

.completed span::before {
  content: '\2713'
}

.title {
  text-align: center;
  text-decoration: none;
  margin-left: 365px;
  color: #444;
}

table {
  border-collapse: collapse;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 15px;
  line-height: 15px;
  text-align: left;
  width: 98%;
}

th {
  background: linear-gradient(#000000, #4d4d4d);
  border-left: 1px solid #555;
  border-right: 1px solid #777;
  border-top: 1px solid #555;
  border-bottom: 1px solid #333;
  box-shadow: inset 0 1px 0 #999;
  color: #fff;
  font-weight: bold;
  padding: 10px 15px;
  position: relative;
  text-shadow: 0 1px 0 #000;
}

th:after {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .08));
  content: '';
  display: block;
  height: 15%;
  left: 0;
  margin: 1px 0 0 0;
  position: absolute;
  top: 25%;
  width: 100%;
}

th:first-child {
  border-left: 1px solid #777;
  box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
  box-shadow: inset -1px 1px 0 #999;
}

td {
  border-right: 1px solid #fff;
  border-left: 1px solid #e8e8e8;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 8px;
  position: relative;
  transition: all 300ms;
}

td:first-child {
  box-shadow: inset 1px 0 0 #fff;
}

td:last-child {
  border-right: 1px solid #e8e8e8;
  box-shadow: inset -1px 0 0 #fff;
}

tr {
  background: url(https://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:nth-child(odd) td {
  background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);
}

tr:last-of-type td {
  box-shadow: inset 0 -1px 0 #fff;
}

tr:last-of-type td:first-child {
  box-shadow: inset 1px -1px 0 #fff;
}

tr:last-of-type td:last-child {
  box-shadow: inset -1px -1px 0 #fff;
}

h1 {
  color: #444;
  text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee, 2px 1px 1px #ccc, 1px 2px 1px #eee, 3px 2px 1px #ccc, 2px 3px 1px #eee, 4px 3px 1px #ccc, 3px 4px 1px #eee, 5px 4px 1px #ccc, 4px 5px 1px #eee, 6px 5px 1px #ccc, 5px 6px 1px #eee, 7px 6px 1px #ccc;
}

a:hover,
a:focus {
  outline: none;
  text-decoration: none;
}

.tab {
  text-align: center;
}

.tab .nav-tabs {
  display: inline-block;
  position: relative;
  border-bottom: none;
}

.tab .nav-tabs li {
  margin: 0;
}

.tab .nav-tabs li a {
  display: block;
  padding: 80px 25px 0 25px;
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  text-align: center;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #fff;
  margin-right: 0;
  overflow: hidden;
  z-index: 1;
  position: relative;
  transition: all 0.3s ease 0s;
}

.tab .nav-tabs li a span {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #f2f2f2;
  margin: auto;
  font-size: 22px;
  color: #999;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  transform: rotate(45deg);
}

.tab .nav-tabs li.active a span {
  background: #29335c;
  color: #fff;
}

.tab .nav-tabs li a span i {
  transform: rotate(-45deg);
}

.tab .nav-tabs li.active a,
.tab .nav-tabs li a:hover {
  color: black;
  border: none;
  border-bottom: 2px solid #fff;
}

.tab .nav-tabs li.active a {
  border-bottom: 2px solid #29335c;
}

.tab .tab-content {
  padding: 30px 0 0 19px;
  margin-top: -5px;
  font-size: 15px;
  color: black;
  line-height: 26px;
  text-align: left;
  border-top: 1px solid #e5e5e5;
  width: 600px;
}

.tab .tab-content .tab-pane #Section3_table {
  margin-left: -8px;
}

.tab .tab-content h3 {
  font-size: 24px;
  margin-top: 0;
}

@media only screen and (max-width: 479px) {
  .tab .nav-tabs li {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }
  .tab .nav-tabs li:last-child {
    margin-bottom: 0;
  }
}
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <title> Order Tracking System </title>
  <center>
    <h1> ORDER TRACKING SYSTEM </h1>
    <br>
    <table class="bts_table">
      <tr>
        <th>ORDER NUMBER</th>
        <th>CUSTOMER NAME</th>
        <th>LOCATION</th>
      </tr>

      <form action="save.php" method="POST">
        <td valign="top"><span class="closedArrow"> 12345 </span></td>
        <td valign="top"><span class="closedArrow"> JOHN </span></td>
        <td valign="top" class="collapsed">
          <ol class="steps">
            <li>
              <div class="num green"><b>1</b></div>
            </li>
            <li>
              <div class="num green"><b>2</b></div>
            </li>
            <li>
              <div class="num green"><b>3</b></div>
            </li>
            <li>
              <div class="num green"><b>4</b></div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num grey"><b>5</b></div>
                <p><span>SHIPPING</span><span>IN PROGRESS</span></p>
              </div>
            </li>
            <li class="closed">
              <div class="num"><b>6</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>7</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>8</b></div>
            </li>
            <li class="closed">
              <div class="num"><b>9</b></div>
            </li>
            <li class="closed">
              <div class="num last"><b>10</b></div>
            </li>

          </ol>
        </td>
        <td colspan="2" class="expanded">
          <ol class="steps">
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>1</b></div>
                <p><span>ORDER</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>2</b></div>
                <p><span>PACKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>3</b></div>
                <p><span>CHECKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num green"><b>4</b></div>
                <p><span>RECHECKING</span><span>Done: 03/18/2019</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num grey"><b>5</b></div>
                <p><span>SHIPPING</span><span>ONGOING</span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num black"><b>6</b></div>
                <p><span>COURIER</span><span>NOT YET DONE </span></p>
              </div>
            </li>
            <li class="open">
              <div class="wrap">
                <div class="num black"><b>7</b></div>
                <p><span>DELIVERY</span><span>NOT YET DONE </span></p>
              </div>

              <li class="open">
                <div class="wrap">
                  <div class="num black last"><b>10</b></div>
                  <p><span>CUSTOMER</span><span>NOT YET DONE </span></p>
                </div>
              </li>
          </ol>
          <hr>
          <div class="tableDiv">
            <div class="container">
              <div class="row">
                <div class="col-md-6">
                  <div class="tab" role="tabpanel">
                    <center>
                      <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                        <li role="presentation"><a href="#Section3" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
                        <li role="presentation"><a href="#Section4" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                      </ul>


                      <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                          <table border="2px">
                            <tr>
                              <th>ITEM</th>
                              <th>DETAILS</th>
                            </tr>
                            <tr>
                              <td>Bag</td>
                              <td>1pc; Green</td>
                            </tr>
                            <tr>
                              <td>Pouch</td>
                              <td>1pc; Blue</td>
                            </tr>
                            <tr>
                              <td>Necklace</td>
                              <td>1pc; Heart shape; Gold</td>
                            </tr>
                            <tr>
                              <td>Shoes</td>
                              <td>1 pair; Red; Size 6</td>
                            </tr>
                          </table><br>
                          <hr>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                          <table border="2px">
                            <tr>
                              <th>CUSTOMER</th>
                              </th>
                              <th>DETAILS</th>
                            </tr>
                            <tr>
                              <td>NAME</td>
                              <td>John Smith</td>
                            </tr>
                            <tr>
                              <td>SHIPPING ADDRESS</td>
                              <td> 445 Mount Eden Road, Mount Eden, Auckland. Rural </td>
                            </tr>
                            <tr>
                              <td>TELEPHONE NUMBER</td>
                              <td>754-3010</td>
                            </tr>
                          </table>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section3">
                          <center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
                            <table id="Section3_table" name="Section3">
                              <tr>
                                <th>ISSUE</th>
                                <th>DETAILS</th>
                              </tr>
                              <tr>
                                <td></td>
                                <td></td>
                              </tr>
                          </center>
                          </table><br>
                          <hr>
                        </div>


                        <div role="tabpanel" class="tab-pane fade" id="Section4">
                          <table border="2px">
                            <tr>
                              <th>COURIER NAME</th>
                              <th>DATE SHIPPED</th>
                              <th>DATE ARRIVED</th>
                            </tr>
                            <tr>
                              <td></td>
                              <td></td>
                              <td></td>
                            </tr>
                          </table><br>
                          <hr>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <tr>
            <td valign="top"><span class="closedArrow"> 67890 </span></td>
            <td valign="top"><span class="closedArrow"> JANE </span></td>
            <td valign="top" class="collapsed">
              <ol class="steps">
                <li class="open">
                  <div class="wrap">
                    <div class="num grey"><b>1</b></div>
                    <p><span>PACKING</span><span>IN PROGRESS</span></p>
                  </div>
                </li>
                <li class="closed">
                  <div class="num"><b>2</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>3</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>4</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>5</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>6</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>7</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>8</b></div>
                </li>
                <li class="closed">
                  <div class="num"><b>9</b></div>
                </li>
                <li class="closed">
                  <div class="num last"><b>10</b></div>
                </li>

              </ol>
            </td>
            <td colspan="2" class="expanded">
              <ol class="steps">
                <li class="open">
                  <div class="wrap">
                    <div class="num green"><b>1</b></div>
                    <p><span>ORDER</span><span>ONGOING</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>2</b></div>
                    <p><span>PACKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>3</b></div>
                    <p><span>CHECKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>4</b></div>
                    <p><span>RECHECKING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>5</b></div>
                    <p><span>SHIPPING</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>6</b></div>
                    <p><span>COURIER</span><span>NOT YET DONE</span></p>
                  </div>
                </li>
                <li class="open">
                  <div class="wrap">
                    <div class="num black"><b>7</b></div>
                    <p><span>DELIVERY</span><span>NOT YET DONE</span></p>
                  </div>

                  <li class="open">
                    <div class="wrap">
                      <div class="num black last"><b>10</b></div>
                      <p><span>CUSTOMER</span><span>NOT YET DONE</span></p>
                    </div>
                  </li>
              </ol>
              <hr>


              <div class="tableDiv">

                <div class="container">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="tab" role="tabpanel">
                        <center>
                          <ul class="nav nav-tabs" role="tablist" style="width: 800px">
                            <li role="presentation" class="active"><a href="#Section5" aria-controls="build_details" role="tab" data-toggle="tab"><span><i class="fa fa-cog" style="font-size:35px; padding: 8px 9px 9px 11px;"></i></span> Order Details</a></li>
                            <li role="presentation"><a href="#Section6" aria-controls="logistics" role="tab" data-toggle="tab"><span><i class="fa fa-bar-chart" style="font-size:25px; padding: 12px 9px 9px 10px;"></i></span> Logistics</a></li>
                            <li role="presentation"><a href="#Section7" aria-controls="reports" role="tab" data-toggle="tab"><span><i class="fa fa-file-text" style="font-size:26px; padding: 14px 9px 9px 13px;"></i></span> Reports</a></li>
                            <li role="presentation"><a href="#Section8" aria-controls="shipments" role="tab" data-toggle="tab"><span><i class="fa fa-arrow-circle-right" style="font-size:34px; padding: 10px 9px 9px 11px;"></i></span> Shipments</a></li>
                          </ul>


                          <div class="tab-content tabs">
                            <div role="tabpanel" class="tab-pane fade in active" id="Section5">
                              <table border="2px">
                                <tr>
                                  <th>ITEM</th>
                                  <th>DETAILS</th>
                                </tr>
                                <tr>
                                  <td>Dress</td>
                                  <td>1pc; Yellow</td>
                                </tr>
                                <tr>
                                  <td>Hat</td>
                                  <td>1pc; Green</td>
                                </tr>
                              </table><br>
                              <hr>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section6">
                              <table border="2px">
                                <tr>
                                  <th>CUSTOMER</th>
                                  </th>
                                  <th>DETAILS</th>
                                </tr>
                                <tr>
                                  <td>NAME</td>
                                  <td>Jane Doe</td>
                                </tr>
                                <tr>
                                  <td>SHIPPING ADDRESS</td>
                                  <td>21 Greens Road RD 2 Ruawai 0592. Partial addresses: Main Highway </td>
                                </tr>
                                <tr>
                                  <td>TELEPHONE NUMBER</td>
                                  <td>1-541-754-3010</td>
                                </tr>
                              </table>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section7">
                              <center><a class="btn btn-danger" href="add_report.php">ADD REPORT</a><br><br>
                                <table id="Section3_table" name="Section3">
                                  <tr>
                                    <th>ISSUE</th>
                                    <th>DETAILS</th>
                                  </tr>
                                  <tr>
                                    <td></td>
                                    <td></td>
                                  </tr>
                              </center>
                              </table><br>
                              <hr>
                            </div>


                            <div role="tabpanel" class="tab-pane fade" id="Section8">
                              <table border="2px">
                                <tr>
                                  <th>COURIER NAME</th>
                                  <th>DATE SHIPPED</th>
                                  <th>DATE ARRIVED</th>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td></td>
                                  <td></td>
                                </tr>
                              </table><br>
                              <hr>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
    </table>
</body>

</html>

相关问题
最新问题