标题:jquery动态增减控件如何才能不刷新页面
取消只看楼主
Sephirose
Rank: 1
来 自:四川-乐山
等 级:新手上路
帖 子:51
专家分:0
注 册:2013-3-26
结帖率:55.56%
已结贴  问题点数:20 回复次数:2 
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);

}
搜索更多相关主题的帖子: function position jquery 动态 如何 
2015-03-20 16:30
Sephirose
Rank: 1
来 自:四川-乐山
等 级:新手上路
帖 子:51
专家分:0
注 册:2013-3-26
得分:0 
回复 5楼 冰镇柠檬汁儿
可是直接用appendChild该如何给新生成的控件指定属性呢,像是他们的ID,因该是自动加1的,而且要是再把删除控件功能加进去的话,不用for循环如何重新排列这些控件的ID呢
2015-04-01 15:23
Sephirose
Rank: 1
来 自:四川-乐山
等 级:新手上路
帖 子:51
专家分:0
注 册:2013-3-26
得分:0 
回复 8楼 冰镇柠檬汁儿
了解了,谢谢你的思路,换了种写法,直接去掉for循环了,用var num = $("#sections tr").length直接计算出他的<tr>行的个数,每次生成时直接num+1就好了
2015-04-02 14:16



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-442864-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.041881 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved