ASP.NET+ashx+jQuery动态添加删除表格

aspx:

<script src="../script/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>
<script language="javascript" type="text/javascript">
        var proID = <%=id %>;
        var flag = 'True';
        
        $(function(){
            readStage();
        });
        
        function readStage(){
            $.get(
                'readstage.ashx?ajax=true&random=' + Math.random(),{'proID':proID},
                function(result){
//                var result = [
//                                {"StageName":"Brett","ProName":"McLaughlin","ID":"1"},
//                                {"StageName":"Jason","ProName":"Hunter","ID":"2"},
//                                {"StageName":"Elliotte","ProName":"Harold","ID":"3"}
//                             ];
                    addnewRow(eval(result));
                }
            );
        }
        
         function addnewRow(values){
            clearRow();        
            if(values.length == 0){
                var newTr = stageTable.insertRow(1);
                var newTd1 = newTr.insertCell(0);
                newTd1.setAttribute("colSpan",5);
                newTd1.innerHTML = '暂无数据记录...';
            }
            
            if(flag == 'True'){
                for(var i = 0; i < values.length; i++){
                    //新行
                    var newTr = stageTable.insertRow(i+1);
                    //序号
                    var newTd1 = newTr.insertCell(0);
                    newTd1.innerHTML = i + 1;
                    //阶段名称
                    var newTd2 = newTr.insertCell(1);               
                    newTd2.innerHTML = '<label id=' + values[i].StageName + ' type="text" alt="' + values[i].StageName + '" >' + values[i].StageName + '</label>';
                    //所属项目
                    var newTd3 = newTr.insertCell(2);
                    newTd3.innerHTML = values[i].ProName;
                    //修改
                    var newTd4 = newTr.insertCell(3);
                    newTd4.innerHTML = "<a href='#' id='edit'" + values[i].ID + "' onclick=\"editStage('" + values[i].ID + "','" + values[i].StageName + "')\">修改</a>"; 
                    //删除
                    var newTd5 = newTr.insertCell(4);
                    newTd5.innerHTML = "<a href='#' id='del'" + values[i].ID + "' onclick=\"delStage('" + values[i].ID + "','" + values[i].StageName + "','Del')\">删除</a>"; 
                }
            }else{
                for(var i = 0; i < values.length; i++){
                    //新行
                    var newTr = stageTable.insertRow(i+1);
                    //序号
                    var newTd1 = newTr.insertCell(0);
                    newTd1.innerHTML = i + 1;
                    //阶段名称
                    var newTd2 = newTr.insertCell(1);               
                    newTd2.innerHTML = '<label id=' + values[i].StageName + ' type="text" alt="' + values[i].StageName + '" >' + values[i].StageName + '</label>';
                    //所属项目
                    var newTd3 = newTr.insertCell(2);
                    newTd3.innerHTML = values[i].ProName;
                    //修改
                    var newTd4 = newTr.insertCell(3);
                    newTd4.innerHTML = "<a href='#' id='edit'" + values[i].ID + "' disabled = 'true' onclick=\"editStage('" + values[i].ID + "','" + values[i].StageName + "')\">修改</a>"; 
                    //删除
                    var newTd5 = newTr.insertCell(4);
                    newTd5.innerHTML = "<a href='#' id='del'" + values[i].ID + "' disabled = 'true' onclick=\"delStage('" + values[i].ID + "','" + values[i].StageName + "','Del')\">删除</a>"; 
                    }
                    
                //隐藏阶段操作条
                document.getElementById('searchtitle').className = 'hidediv';
            }
             $('#stageTable').show();
             //清空hidden
             document.getElementById('hidStageID').value = 0;
        }
        
        //添加阶段
        function addStage(operate){
            var stageName = document.getElementById('txtStageName').value;
            var id = document.getElementById('hidStageID').value;
            if(stageName.length <= 0){
                alert('阶段名称不能为空！');
                return;
            }
            $.get(
                'savestage.ashx?ajax=true&random=' + Math.random(),{'proID':proID,'stageName':stageName,'ID':id,'operate':operate},
                function(result){
                    if(result == 'S'){
                        alert('保存成功！');
                        readStage();
                    }
                    else if(result == 'E'){
                        alert('保存失败！');
                    }
                    else if(result == 'M')
                    {
                    alert('修改成功！');
                    readStage();
                    }
                    else
                    {
                    alert('修改失败！');
                    }
                }
            );
        }
        
        //清除多余的行
        function clearRow(){
            var signFrame = document.getElementById("stageTable");
            var rowscount = signFrame.rows.length;
            //循环删除行,从最后一行往前删除
            for(i=rowscount - 1;i >0; i--){
             signFrame.deleteRow(i);
            }
        }
        
        //修改
        function editStage(id,stagename){
            document.getElementById('hidStageID').value = id;
            document.getElementById('txtStageName').value = stagename;
        }
        
        //删除
        function delStage(id,stageName,operate){
            if(confirm('确定要删除此信息？')){
                $.get(
                'delstage.ashx?ajax=true&random=' + Math.random(),{'proID':proID,'stageName':stageName,'ID':id,'operate':operate},
                function(result){
                    if(result == 'S'){
                        alert('删除成功！');
                        readStage();
                    }else{
                        alert('删除失败！');
                    }
                });
            }
        }

        function delMsg()
        {
            if(confirm('确定删除此项？'))
            {
                $.get("delproject.ashx?ajax=true&random="+Math.random(),{"proID":proID},
                function(result){
                if(result == 'S')
                {
                    alert('删除成功！');
                    window.location="projectlist.aspx";
                }
                else
                {
                    alert('删除失败！');
                }
                });
            }
        }  

    </script>

<div id="searchtitle">
<table width="66%"  style="margin-top:10px" border="0" cellpadding="0" cellspacing="0">
  <tr>
       <td width="23%">阶段名称：<asp:TextBox ID="txtStageName" runat="server" class="input"></asp:TextBox></td>
       <td style="padding-left:10px" align="left"><input id="btnPost" type="button" value="保存" class="button" onclick="addStage('Add&Edit')"/></td>
  </tr>
</table>
</div>
    <asp:HiddenField ID="hidStageID" runat="server" />
<table border="0"  id="stageTable" class="infolist" style="width:65%; margin-left:0" cellpadding="0" cellspacing="0">
      <thead>
          <tr>
              <th width="10%">序号</th>
              <th width="25%">阶段名称</th>
              <th>所属项目</th>
              <th style="border-right:1px solid #999999;" colspan="2" width="20%">操作</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

View Code