jquery动态增减控件如何才能不刷新页面
用jquery动态管理控件,可是每一次增减控件都会刷新页面,然后控件里面原来输入的值就都不在了,可以怎么来实现在动态增减控件时不刷新页面呢?function addSections(position) {
var all_list = [];
for (var i = 0; i < sctionCount; i++) {
var sectionName = "#sctionName" + (i + 1);
var sectionJoin = "#sectionJoin" + (i + 1);
var sectionJoinID = "#sectionJoinID" + (i + 1);
var sectionDesc = "#sectionDesc" + (i + 1);
var sectionstart = "sectionstart" + (i + 1);
var sectionend = "#sectionend" + (i + 1);
var name = $(sectionName).val();
var Desc = $(sectionDesc).val();
var Join = $(sectionJoin).val();
var start = $(sectionstart).val();
var end = $(sectionend).val();
var value = {
'sectionName': name,
'sectionJoin': Join,
'sectionDesc': Desc,
'sectionstart': start,
'sectionend': end
}
all_list.push(value);
if (position == i) {
var value = {
'sectionName': "",
'sectionJoin': "",
'sectionDesc': "",
'sectionstart': "",
'sectionend': ""
}
all_list.push(value);
}
}
sctionCount += 1;
var sctiontable = "<table id='sections' cellspacing='0' cellpadding='0' border='1' class='type-table' style='text-align: center'>";
sctiontable += "<tr style='font-size:18px' class='table-top-tr'>";
sctiontable += "<td >阶段名称</td>";
sctiontable += "<td>参与人</td>";
sctiontable += "<td style='width:180px'>描述</td>";
sctiontable += "<td>开始日期</td>";
sctiontable += "<td>结束日期</td>";
sctiontable += "<td>操作</td>";
sctiontable += "</tr>";
for (var i = 0; i < sctionCount; i++) {
var sectionName = "sctionName" + (i + 1);
var sectionJoin = "sectionJoin" + (i + 1);
var sectionJoinID = "sectionJoinID" + (i + 1);
var sectionDesc = "sectionDesc" + (i + 1);
var sectionstart = "sectionstart" + (i + 1);
var sectionend = "sectionend" + (i + 1);
var sectionadd = "sectionadd" + (i + 1);
var sectionDelete = "sectionDelete" + (i + 1);
var sectionClose = "sectionClose" + (i + 1);
var classid = "table-clo-tr" + (i % 2 + 1);
var sectionnametip = "sectionnametip" + (i + 1);
var sectionJointip = "sectionJointip" + (i + 1);
var sectiondesctip = "sectiondesctip" + (i + 1);
var sectionstartTip = "sectionstartTip" + (i + 1);
var sectionendTip = "sectionendTip" + (i + 1);
sctiontable += "<tr style='font-size:18px; height:40px' class='" + classid + "'>";
sctiontable += "<td>" + "<input id='" + sectionName + "' name='" + sectionName + "' type='text' style='width:100px' value='" + all_list[i].sectionName + "'/>" +
"<span id='" + sectionnametip + "' style='color:red;font-size:12px;'>*</span>" + "</td>";
sctiontable += "<td>" + "<input id='" + sectionJoin + "' name='" + sectionJoin + "' type='text' onclick='javascript:creat(" + (i + 1) + ")'/>" +
"<span id='" + sectionJointip + "' style='color:red;font-size:12px;'>*</span>" +
"<input id='" + sectionJoinID + "' name='" + sectionJoinID + "' type='text' hidden='hidden' />" + "</td>";
sctiontable += "<td>" + " <textarea id='" + sectionDesc + "' name='" + sectionDesc + "' cols='20' rows='2'> </textarea>" +
"<span id='" + sectiondesctip + "' style='color:red;font-size:12px;'>*</span>" + "</td>";
sctiontable += "<td>" + "<input class='startdate' id='" + sectionstart + "' name='" + sectionstart + "' type='text' value='' onclick='WdatePicker( )' style='width:100px' value='" + all_list[i].sectionstart + "'/>" +
"<span id='" + sectionstartTip + "' style='color:red;font-size:12px;'>*</span>" + "</td>";
sctiontable += "<td>" + "<input class='enddate' id='" + sectionend + "' name='" + sectionend + "' type='text' value='' onclick='WdatePicker( )' style='width:100px' value='" + all_list[i].sectionend + "'/>" +
"<span id='" + sectionendTip + "' style='color:red;font-size:12px;'>*</span>" + "</td>";
sctiontable += "<td>" + "<input id='" + sectionadd + "' type='button' value='+' onclick='addSections(" + i + ")' style='width:30px'/>" +
"<input id='" + sectionDelete + "' type='button' value='-' onclick='deletesection(" + i + ")' style='width:30px'/>" + "</td>";
sctiontable += "</tr>";
}
sctiontable += "</table>";
$("#Sctions").html(sctiontable);
}