前臺頁面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//保存前獲取頁面的新增信息
function save(){
var rows=$("#tab tr");
if(rows.length>5){
alert("最多隻能添加五個顧客！");
return false;
}else{
var data=getTableData("tab");
if(""!=$.trim(JSON.stringify(data))){
$("#jsonStr").val(JSON.stringify(data));
document.forms[0].submit();
}
return true;
}
}
function getTableData(tableId){
var rows=$("#" + tableId +" tr");
var data = "["; //定義數據變量
for(var i=1;i<rows.length;i++){
var user="{"; //定義數據變量
rows.eq(i).find("input").each(function(){//遍歷表格中的input等標籤
if($(this).attr("name")){ //如果此標籤設置了name，則取出其中數據
user += "\"" + $(this).attr("name") + "\":\"" + $(this).val() + "\","; //拼接id和數據
}
});
if(user.length != 1){ //如果取出了數據，刪除多餘的符號
user = user.substring(0, user.length-1); //刪除多餘的符號','
}
user += "}";
if(i<rows.length-1)
user += ",";
data += user;
}
data += "]";
alert(data);
data = eval("(" + data + ")"); //將數據轉換成json對象
return data; //返回數據
}
var i =0;
var options="";
$.ajax({
type: "POST",
url: "yhtcid.do",
dataType: "text",
success: function(data){
options=$.trim(data);
}
});
//通過Jquery新增一行
$(document).ready(function() {
$("#newBtn").bind("click", function(){
var rows=$("#tab tr");
if(rows.length>5){
alert("最多隻能添加五個顧客！");
return false;
}else{
var trHtml="<tr><td><input style=\"text-align:left; \" id=\"allCkb\" type=\"checkbox\" value=\checkbox"+ i +"\" /></td>"+
"<td><input style=\"text-align: center; width: 100%;\" id=\"name_"+ i +"\" name=\"name\" type=\"text\" /></td>"+
"<td><input style=\"text-align: center; width: 100%;\" id=\"age_"+ i +"\" name=\"age\" type=\"text\" /></td>"+
"<td><input style=\"text-align: center; width: 100%;\" id=\"sex_"+ i +"\" name=\"sex\" type=\"hidden\" value=\"1\"/>"+
"<select style=\"text-align: center;\" id=\"selectsex_"+ i +"\" onchange=\"dsex("+i+")\" ><option value =\"1\">男</option> <option value =\"2\">女</option></select></td>"+
"<td><input style=\"text-align: center; width: 100%;\" id=\"phone_"+ i +"\" name=\"phone\" type=\"text\" onblur=\"checkSubmitMobil("+i+")\"/></td>"+
"<td><input style=\"text-align: center; width: 100%;\" id=\"card_"+ i +"\" name=\"card\" type=\"text\" onblur=\"isCardNo("+i+")\"/></td>"+
"<td><input style=\"text-align: center; width: 100%;\" id=\"email_"+ i +"\" name=\"email\" type=\"text\" onblur=\"checkSubmitemail("+i+")\"/></td>"+
"<div style=\"text-align: center; width:140px;\"><td><input style=\"text-align: center; width: 10px;\" id=\"pname_"+ i +"\" name=\"pname\" type=\"hidden\" value=\"1001\" onblur=\"save()\"/>"+
"<select id=\"selectID_"+ i +"\" style=\"text-align: center; width: 80px;\" onchange=\"dpanme("+i+")\" >"+options+"</select> /"+
" <input style=\"text-align: center; width: 50px; border-top:0px ; border-left:0px ; border-right:0px ;\" id=\"price_"+ i +"\" type=\"text\" value=\"1000\" readonly=\"readonly\" /></td></tr>"
$("#tab").append(trHtml);
i ++ ;
return true;
}
});
//通過Jquery刪除一行
$("#delBtn").bind("click", function(){
if($('#allCkb').is(':checked')){
if (confirm("你確定刪除嗎？")) {
$("#tab tr:not(:first)").empty();
$('span').text('全選');
$("#Checkbox").attr("checked",false);
}
}else{
alert("請選擇要刪除的數據!");
}
});
});
function dpanme(i){
var selectValue = $("#selectID_"+i).val();
$("#pname_" + i).val(selectValue);
$.ajax({
type:"POST",
url:"price.do",
dataType: "text",
data:{"id":selectValue},
success:function(str){
$("#price_"+i).val(str);
}
});
}
function dsex(i){
var selectValue = $("#selectsex_"+i).val();
$("#sex_" + i).val(selectValue);
}
function check(){
if ($("#Checkbox").prop("checked") ) {//全選
$("input[name='allCkb']").prop("checked", true);
$('span').text('取消全選');
}
else {
$("input[name='allCkb']").prop("checked", false);
$('span').text('全選');
}
}
</script>
<body>
<form action ="addUser.do" method="post" onsubmit="return save();">
<h3 align="center">新增旅遊人員信息</h3>
<input name="jsonStr" id="jsonStr" type="hidden">
<table id="tab" align="center" border="1" cellpadding="0" cellspacing="0" width="90%">
<tr>
<td width="5%" align="left"><input id="Checkbox" type="checkbox" onclick="check()" /><span>全選</span></td>
<td width="10%" align="center">姓名</td>
<td width="10%" align="center">年齡</td>
<td width="5%" align="center">性別</td>
<td width="10%" align="center">聯繫電話</td>
<td width="10%" align="center">***</td>
<td width="10%" align="center">電子郵箱</td>
<td width="10%" align="center">套餐名/價格</td>
</tr>
</table>
<p style="text-align:center">
<input type="button" id="newBtn" value="新增行" />
<input type="button" id="delBtn" value="刪除行" />
<input class="button" type="submit" value="暫存" />
</p>
</form>
</body>
</html>
後臺代碼
@RequestMapping("yhtcid")
public @ResponseBody void yhtcid(HttpServletResponse response) throws IOException{
List<Yhtc> list=yhtcservice.getAll();
String str="";
response.setContentType("text/html;charset=utf-8");
for(int i=0;i<list.size();i++){
str+="<option value='"+list.get(i).getId()+"'>"+list.get(i).getPname()+"</option>";
}
PrintWriter out = response.getWriter();
out.print(str);
}Jquery 解析返回的Json，然後寫入select下拉框
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.