information-system/application/third_party/train_it/views/booking.php

<div style="width:90%;margin:30px auto;">
	<div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">列车信息</h3>
      </div>
      <div class="panel-body">
        <p><?php echo $date;?> <?php echo $train_code;?> <?php echo $from_station_name;?>站（<?php echo $start_time;?>开）到<?php echo $to_station_name;?>站（<?php echo $arrive_time;?>到）</p>
        <p style="border-top:1px dashed #000; height:1px">
        <p> 
    
        	<?php if($swz_num){echo "商务座(￥{$swz_price})".$swz_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($tdz_num){echo "特等座(￥{$tdz_price})&nbsp;&nbsp;".$tdz_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($ydz_num){echo "一等座(￥{$ydz_price})&nbsp;&nbsp;".$ydz_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($edz_num){echo "二等座(￥{$edz_price})&nbsp;&nbsp;".$edz_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($gjrw_num){echo "高级软卧(￥{$gjrw_price})&nbsp;&nbsp;".$gjrw_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($rw_num){echo "软卧(￥{$rw_price})&nbsp;&nbsp;".$rw_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($yw_num){echo "硬卧(￥{$yw_price})&nbsp;&nbsp;".$yw_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($rz_num){echo "软座(￥{$rz_price})&nbsp;&nbsp;".$rz_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($yz_num){echo "硬座(￥{$yz_price})&nbsp;&nbsp;".$yz_num."张票&nbsp;&nbsp;&nbsp;";}?>
        	<?php if($wz_num){echo "无座(￥{$wz_price})&nbsp;&nbsp;".$wz_num."张票&nbsp;&nbsp;&nbsp;";}?>
        </p>	
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">乘客信息</h3>
      </div>
      <div class="panel-body">
      	<form action="booking_do" method="post">
      	<input type="hidden" name="train_code" value="<?php echo $train_code;?>" />
      	<input type="hidden" name="from_station_code" value="<?php echo $from_station_code;?>" />
      	<input type="hidden" name="from_station_name" value="<?php echo $from_station_name;?>" />
      	<input type="hidden" name="to_station_code" value="<?php echo $to_station_code;?>" />
      	<input type="hidden" name="to_station_name" value="<?php echo $to_station_name;?>" />
      	<input type="hidden" name="date" value="<?php echo $date;?>" />
        <div class="table-responsive">
	      <table class="table table-bordered" id="back_table">
	        <thead>
	        	<tr>
	        		<!-- <th>序号</th> -->
	        		<th>席别</th>
	        		<th>票种</th>
	        		<th>姓名</th>
	        		<th>证件类型</th>
	        		<th>证件号码</th>
	        		<th>手机号码</th>
	        		<th>删除</th>
	        	</tr>
	        </thead>
	        <tbody>
	        	<tr id="rowTemplete_0">
	        		<!-- <td>1</td> -->
	        		<td>
	        			<select name="zw[]" id="">
	        				
	        				<?php if($swz_num){echo "<option value='swz_{$swz_price}'>商务座</option>";}?>
				        	<?php if($tdz_num){echo "<option value='tdz_{$tdz_price}'>特等座</option>";}?>
				        	<?php if($ydz_num){echo "<option value='ydz_{$ydz_price}'>一等座</option>";}?>
				        	<?php if($edz_num){echo "<option value='edz_{$edz_price}'>二等座</option>";}?>
				        	<?php if($gjrw_num){echo "<option value='gjrw_{$gjrw_price}'>高级软卧</option>";}?>
				        	<?php if($rw_num){echo "<option value='rw_{$rw_price}'>软卧</option>";}?>
				        	<?php if($yw_num){echo "<option value='yw_{$yw_price}'>硬卧</option>";}?>
				        	<?php if($rz_num){echo "<option value='rz_{$rz_price}'>软座</option>";}?>
				        	<?php if($yz_num){echo "<option value='yz_{$yz_price}'>硬座</option>";}?>
				        	<?php if($wz_num){echo "<option value='wz_{$wz_price}'>无座（这个有些问题）</option>";}?>
	        			</select>
	        		</td>
	        		<td>
	        			<select name="piaotype[]" id="">
	        				<option value="cr">成人票</option>
	        				<option value="et">儿童票</option>
	        				<option value="xs">学生票</option>
	        				<option value="cz">残军票</option>
	        			</select>
	        		</td>
	        		<td>
	        			<input type="text" name="passengersename[]" />
	        		</td>
	        		<td>
	        			<select name="passportty[]" id="">
	        				<option value="ed">二代身份证</option>
	        				<option value="yd">一代身份证</option>
	        				<option value="hz">护照</option>
	        				<option value="ga">港澳通行证</option>
	        				<option value="tw">台湾通行证</option>
	        			</select>
	        		</td>
	        		<td>
	        			<input type="text" name="passportseno[]" />
	        		</td>
	        		<td>
	        			<input type="text" name="mobile[]" />
	        		</td>
	        		<td>
	        			<a href='javascript:void(0);' onclick='deleteBatchRow(this)' class="btn btn-warning btn-sm" style="border-radius: 3px;" ><span class="glyphicon glyphicon-remove"></span></a>
	        		</td>
	        	</tr>
	        </tbody>      
	      </table>

	    </div>
	    <button type="button" id="add" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-plus"></span>增加乘客</button>
		  <p style="border-top:1px dashed #000; height:1px;margin-top:10px;" ></p>
		  <div style="text-align:center;">
		  	<button type="submit" id="sub" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-ok"></span>提交订单</button>	
		  </div>
		</form>  
      </div>
    </div>
</div>

<script>
	//记录添加行数
var areaCount=1;
//记录实际表格行数
var rowCount=1;
//删除模板html
var delRowTemplete = "<td><a href='javascript:void(0);' class='content_del' onclick='deleteBatchRow(this)'>删除</a></td>";
//表格行模板
var addRowTemplete= "";
$(function(){
//首先取出需要克隆的模板，模板行<tr>id为rowTemplete_0
addRowTemplete=  $("#rowTemplete_0").html();
});
//增加行
function addBatchRow(type){
	if(rowCount>4){
		alert("一次最多填写五位乘客");
		return false;
	}
	var templete = $("<tr id='rowTemplete_"+areaCount+"'></tr>");
	//递增序号，替换掉tr或者td中存在[0]、_0或者(0)防止id相同,这么设计主要是为了后台取值时方便
	templete = templete.append(addRowTemplete.replace(/\[0\]/g,"["+areaCount+"]").replace(/_0/g,"_"+areaCount).replace("processStat(\"0\")","processStat("+areaCount+")").replace(/1/g,rowCount+1));
	//找到最后一条存在的行,在其后拼接一行
	var flag = false;
	for(var i=areaCount-1;i>=0;i--){
		if($("#rowTemplete_"+i).length>0){ 
			$("#rowTemplete_"+i).after(templete);
			break;
		}
	}
	//计数加一
	areaCount++; rowCount++;
}
//删除行
function deleteBatchRow(obj){
	if(rowCount>1) {
		$(obj).parents("tr").remove();
		rowCount--;
	} else alert("至少保留一行");//如果全部删除了，那么也就没有办法再添加行了，模板行也被删了呀
}
//取得条数
function getAreaCount(){
	return rowCount;
}

$("#add").click(function(){
	addBatchRow();
});
</script>