第一次写JQuery页面

<title>发布案例</title>
    <script src="../Scripts/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        .txtNoBorder
        {
            border: 0 solid;
        }
        .EvidenceNumber
        {
         font-size:13px;
        }
    </style>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#btnAddCaseMatPro").click(function () {
                $("#tbCaseMatPro").show();
            });

            $("#btnAddEvidence").click(function () {
                $("#tbEvidence").show();
            });

            $("#btnEvidenceCancle").click(function () {
                $("#tbEvidence").hide();
            });

            $("#btnCaseMatPrCancle").click(function () {
                $("#tbCaseMatPro").hide();
            });

            // 添加案件过程
            $("#btnCaseMatPro").click(function () {
                var caseTime = $("#<%=txtCaseTime.ClientID %>").val();
                var personThing = $("#<%=txtPersonThing.ClientID %>").val();
                var result = $("#<%=txtResult.ClientID %>").val();

                var itemtemplate = $("#trCaseMatProTemplate").clone();
                var isModify = $("#hdProSender").val();

                if (isModify != "") {
                    var tr = $("#" + isModify).parent().parent();
                    tr.after(itemtemplate);
                    tr.remove();
                }
                else {
                    $(itemtemplate).appendTo($("#tbShowCaseMatPro"));
                    var btnEdit = $("#tbShowCaseMatPro #trCaseMatProTemplate").find("input[name='btneditCaseMatPro']");
                    var date = new Date()
                    $(btnEdit).attr("id", $(btnEdit).attr("id") + date.getYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds());
                }

                //设置显示
                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("#tdCaseTime").text(caseTime);
                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("#ttPersonThing").val(personThing);
                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("#ttResult").val(result);

                //设置隐藏域
                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("input[name='hdCaseTime']").val(caseTime);
                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("input[name='hdPersonThing']").val(personThing);
                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("input[name='hdResult']").val(result);

                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("#ttPersonThing").removeAttr("id");
                $("#tbShowCaseMatPro #trCaseMatProTemplate").find("#ttResult").removeAttr("id");
                $("#tbShowCaseMatPro").find("#trCaseMatProTemplate").removeAttr("id");
                $("#tbShowCaseMatPro").find("#tdCaseTime").removeAttr("id");

                $("#tbCaseMatPro").hide();
                ClearCaseMatPro();
            });

            // 添加和编辑证据
            $("#btnEvidence").click(function () {
                var evidenceName = $("#<%=txtEvidenceName.ClientID  %>").val();
                var infoContent = $("#<%=txtInfoContent.ClientID  %>").val();
                var sourceID = $("#<%=dropSource.ClientID  %>").val();
                var source = $("#<%= dropSource.ClientID %>").find("option:selected").text();
                var materialType = $("#<%= dropMaterialType.ClientID %>").find("option:selected").text();
                var materialTypeID = $("#<%=dropMaterialType.ClientID  %>").val();
                var pageNumber = $("#<%=txtPageNumber.ClientID  %>").val();


                var itemtemplate = $("#trEvidenceTemplate").clone();

                var last = parseInt($("#hfLastNumber").val());
                var isModify = $("#hdEvidenceSender").val();

                if (isModify != "") {
                    var tr = $("#" + isModify).parent().parent();

                    last = tr.find(".EvidenceNumber").text();
                    tr.after(itemtemplate);
                    tr.remove();
                }
                else {
                    last = last + 1;
                    $("#<%=hfLastNumber.ClientID %>").val(last);
                    $(itemtemplate).appendTo($("#tdShowEvidence"));
                    var btnEdit = $("#tdShowEvidence #trEvidenceTemplate").find("input[name='btneditEvidence']");
                    var date = new Date()
                    $(btnEdit).attr("id", $(btnEdit).attr("id") + date.getYear() + date.getMonth() + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds());
                }

                //设置显示
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdNumber").text(last);
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdEvidenceName").text(evidenceName);
                $("#tdShowEvidence #trEvidenceTemplate").find("#ttInfoContent").val(infoContent);
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdMaterialSouce").text(source);
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdMaterialType").text(materialType);
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdPageNumber").text(pageNumber);

                //设置隐藏域
                $("#tdShowEvidence #trEvidenceTemplate").find("input[name='hdEvidenceName']").val(evidenceName);
                $("#tdShowEvidence #trEvidenceTemplate").find("input[name='hdInfoContent']").val(infoContent);
                $("#tdShowEvidence #trEvidenceTemplate").find("input[name='hdMaterialSouceID']").val(sourceID);
                $("#tdShowEvidence #trEvidenceTemplate").find("input[name='hdMaterialTypeID']").val(materialTypeID);
                $("#tdShowEvidence #trEvidenceTemplate").find("input[name='hdPageNumber']").val(pageNumber);

                $("#tdShowEvidence #trEvidenceTemplate").find("#tdNumber").removeAttr("id");
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdEvidenceName").removeAttr("id");
                $("#tdShowEvidence #trEvidenceTemplate").find("#ttInfoContent").removeAttr("id");
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdMaterialType").removeAttr("id");
                $("#tdShowEvidence #trEvidenceTemplate").find("#tdPageNumber").removeAttr("id");
                $("#tdShowEvidence").find("#trEvidenceTemplate").removeAttr("id");

                ClearEvidence();
                $("#tbEvidence").hide();
            });
        });

        // 添加后清空案件过程中控件
        function ClearCaseMatPro() {
            $("#<%=txtCaseTime.ClientID %>").val("");
            $("#<%=txtPersonThing.ClientID %>").val("");
            $("#<%=txtResult.ClientID %>").val("");
            $("#hdProSender").val("");
        }

        // 添加证据后清空控件
        function ClearEvidence() {
            $("#<%=txtEvidenceName.ClientID %>").val("");
            $("#<%=txtInfoContent.ClientID %>").val("");
            $("#<%=dropSource.ClientID %>").get(0).selectedIndex = 0;
            $("#<%=dropMaterialType.ClientID %>").get(0).selectedIndex = 0;
            $("#<%=txtPageNumber.ClientID %>").val("");
            $("#hdEvidenceSender").val("");
        }

        // 编辑办案过程
        function EditCaseMatPro(sender) {
            var caseTime = $(sender).parent().find("input[name='hdCaseTime']").val();
            var personThing = $(sender).parent().find("input[name='hdPersonThing']").val();
            var result = $(sender).parent().find("input[name='hdResult']").val();
            $("#<%=txtCaseTime.ClientID %>").val(caseTime);
            $("#<%=txtPersonThing.ClientID %>").val(personThing);
            $("#<%=txtResult.ClientID %>").val(result);
           
            $("#hdProSender").val($(sender).attr("id"));
            $("#tbCaseMatPro").show();
        }
        // 编辑证据
        function EditEvidence(sender) {
           
            var materialSouceID = $(sender).parent().find("input[name='hdMaterialSouceID']").val();
            var materialTypeID = $(sender).parent().find("input[name='hdMaterialTypeID']").val();
            var evidenceName = $(sender).parent().find("input[name='hdEvidenceName']").val();
            var infoContent = $(sender).parent().find("input[name='hdInfoContent']").val();
            var pageNumber = $(sender).parent().find("input[name='hdPageNumber']").val();
           
            $("#<%=txtEvidenceName.ClientID %>").val(evidenceName);
            $("#<%=txtInfoContent.ClientID %>").val(infoContent);
            $("#<%=dropSource.ClientID %>").get(0).value = materialSouceID;
            $("#<%=dropMaterialType.ClientID %>").get(0).value = materialTypeID;
            $("#<%=txtPageNumber.ClientID %>").val(pageNumber);

            $("#hdEvidenceSender").val($(sender).attr("id"));
            $("#tbEvidence").show();
        }

        // 删除办案过程
        function RemovePro(sender) {
            if (confirm("您要删除此项吗?")) {
                $(sender).parent().parent().remove();
            }
        }

        // 删除证据
        function RemoveEvidence(sender) {
            if (confirm("您要删除此项吗?")) {
                $(sender).parent().parent().remove();

                // 调整序号
                $("#tdShowEvidence").find(".EvidenceNumber").each(function (index, date) {
                    $(date).text(index + 1);
                });
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    基本信息
    <table width="800px">
        <tr>
            <td align="right">
                案例名称
            </td>
            <td colspan="3">
                <asp:TextBox ID="txtCaseName" runat="server" MaxLength="128" Width="300px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right">
                案例类型
            </td>
            <td>
                <asp:DropDownList ID="dropCaseType" runat="server">
                </asp:DropDownList>
            </td>
            <td align="right">
                案由
            </td>
            <td>
                <uc1:CaseReason ID="CaseReason1" runat="server" />
            </td>
        </tr>
        <tr>
            <td align="right">
                案情摘要
            </td>
            <td colspan="3">
                <asp:TextBox ID="txtCaseAbstract" runat="server" Width="437px" MaxLength="1000" TextMode="MultiLine"
                    Height="94px"></asp:TextBox>
            </td>
        </tr>
    </table>
    <div>
        案件过程
    </div>
    <table width="800px">
        <tr>
            <td>
                <table id="tbShowCaseMatPro" width="700px">
                    <tr>
                        <td>
                            时间
                        </td>
                        <td>
                            人物及事件
                        </td>
                        <td>
                            结果
                        </td>
                        <td>
                            操作
                        </td>
                    </tr>
                    <asp:Repeater ID="rptCaseMatPro" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td>
                                    <asp:HiddenField ID="hfCaseMatProID" runat="server" Value='<%# Eval("CaseMatProID") %>' />
                                    <%# Eval("CaseTime") %>
                                </td>
                                <td>
                                    <%# Eval("PersonThing")%>
                                </td>
                                <td>
                                    <textarea name="ttResult" rows="3" cols="20" readonly="readonly"><%# Eval("Result")%></textarea>
                                </td>
                                <td>
                                    <input type="hidden" name="hdCaseTime" value='<%# Eval("CaseTime") %>' />
                                    <input type="hidden" name="hdPersonThing" value='<%# Eval("PersonThing")%>' />
                                    <input type="hidden" name="hdResult" value='<%# Eval("PersonThing")%>' />
                                    <input id="btneditCaseMatPro" onclick="EditCaseMatPro(this)" runat="server" type="button" value="编辑" />
                                    <input onclick="RemovePro(this)" type="button" value="删除" />
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </table>
                <table style="display: none;">
                    <tr id="trCaseMatProTemplate">
                        <td id="tdCaseTime">
                            {CaseTime}
                        </td>
                        <td class="txtNoBorder">
                            <textarea id="ttPersonThing" rows="3" cols="20" readonly="readonly"></textarea>
                        </td>
                        <td class="txtNoBorder">
                            <textarea id="ttResult" name="ttResult" rows="3" cols="20" readonly="readonly"></textarea>
                        </td>
                        <td>
                            <input type="hidden" name="hdCaseTime" value="" />
                            <input type="hidden" name="hdPersonThing" value="" />
                            <input type="hidden" name="hdResult" value="" />
                            <input name="btneditCaseMatPro" onclick="EditCaseMatPro(this)" runat="server" type="button" value="编辑" />
                            <input onclick="RemovePro(this)" type="button" value="删除" />
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top">
                <input id="btnAddCaseMatPro" type="button" value="添加" />
            </td>
        </tr>
    </table>
    <table width="800px">
        <tr>
            <td align="right">
            <input id="hdProSender" type="hidden" value="" />
                争议焦点
            </td>
            <td>
                <asp:TextBox ID="txtDebateFocus" runat="server" Width="437px" MaxLength="1000" TextMode="MultiLine"
                    Height="94px"></asp:TextBox>
            </td>
        </tr>
    </table>
    <div>
        案例法律依据
    </div>
    <table width="800px">
        <tr>
            <td>
                法律依据
            </td>
            <td valign="top">
                <asp:TextBox ID="txtCaseMateLaw" runat="server" Width="437px" MaxLength="1000" TextMode="MultiLine"
                    Height="94px"></asp:TextBox>
            </td>
        </tr>
    </table>
    <div>
        案例证据目录
    </div>
    <div>
        证据目录
    </div>
    <asp:HiddenField ID="hfLastNumber" runat="server" Value="0" />
    <table width="800px">
        <tr>
            <td>
                <table id="tdShowEvidence">
                    <tr>
                        <td>
                            <input id="hdEvidenceSender" type="hidden" value="" />
                            序号
                        </td>
                        <td>
                            来源
                        </td>
                        <td>
                            种类
                        </td>
                        <td>
                            名称
                        </td>
                        <td>
                            证明对象类型
                        </td>
                        <td>
                            页码
                        </td>
                        <td>
                            操作
                        </td>
                    </tr>
                    <asp:Repeater ID="rptEvidence" runat="server"
                        onitemdatabound="rptEvidence_ItemDataBound" >
                        <ItemTemplate>
                            <tr>
                                <td class="EvidenceNumber">
                                    <%# GetNumber() %>
                                </td>
                                <td>
                                    <%# Eval("MaterialSouceID") %>
                                </td>
                                <td>
                                    <%# Eval("MaterialTypeID") %>
                                </td>
                                <td>
                                    <%# Eval("EvidenceName") %>
                                </td>
                                <td>
                                    <textarea id="ttInfoContent" rows="3" cols="20" readonly="readonly"><%# Eval("InfoContent") %></textarea>
                                </td>
                                <td>
                                    <%# Eval("PageNumber") %>
                                </td>
                                <td>
                                    <input type="hidden" name="hdMaterialSouceID" value="<%# Eval("MaterialSouceID") %>" />
                                    <input type="hidden" name="hdMaterialTypeID" value="<%# Eval("MaterialTypeID") %>" />
                                    <input type="hidden" name="hdEvidenceName" value="<%# Eval("EvidenceName") %>" />
                                    <input type="hidden" name="hdInfoContent" value="<%# Eval("InfoContent") %>" />
                                    <input type="hidden" name="hdPageNumber" value="<%# Eval("PageNumber") %>" />
                                    <input name="btneditEvidence" id="btneditEvidence" onclick="EditEvidence(this)" runat="server" type="button" value="编辑" />
                                    <input name="btnRemoveEvidence" onclick="RemoveEvidence(this)" type="button" value="删除" />
                                   
                                </td>
                        </ItemTemplate>
                    </asp:Repeater>
                </table>
                <table style="display: none">
                    <tr id="trEvidenceTemplate">
                        <td id="tdNumber" class="EvidenceNumber">
                            {Number}
                        </td>
                        <td id="tdMaterialSouce">
                            {MaterialSouce}
                        </td>
                        <td id="tdMaterialType">
                            {MaterialType}
                        </td>
                        <td id="tdEvidenceName">
                            {EvidenceName}
                        </td>
                        <td>
                            <textarea id="ttInfoContent" rows="3" cols="20" readonly="readonly"></textarea>
                        </td>
                        <td id="tdPageNumber">
                            {PageNumber}
                        </td>
                        <td>
                            <input type="hidden" name="hdMaterialSouceID" value="" />
                            <input type="hidden" name="hdMaterialTypeID" value="" />
                            <input type="hidden" name="hdEvidenceName" value="" />
                            <input type="hidden" name="hdInfoContent" value="" />
                            <input type="hidden" name="hdPageNumber" value="" />
                            <input name="btneditEvidence" onclick="EditEvidence(this)" type="button" value="编辑" />
                            <input onclick="RemoveEvidence(this)" type="button" value="删除" />
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top">
                <input id="btnAddEvidence" type="button" value="添加" />
            </td>
        </tr>
    </table>
    <div style="text-align: center;">
        <asp:Button ID="btnAddCase" runat="server" Text="添加案例素材" OnClick="btnAddCase_Click" />
    </div>
    <table id="tbCaseMatPro" width="600px" style="display: none">
        <tr>
            <td align="right">
                时间
            </td>
            <td>
                <asp:TextBox ID="txtCaseTime" runat="server" MaxLength="128"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top">
                人物及事件
            </td>
            <td>
                <asp:TextBox ID="txtPersonThing" runat="server" TextMode="MultiLine" MaxLength="1000"
                    Height="92px" Width="314px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top">
                结果
            </td>
            <td>
                <asp:TextBox ID="txtResult" runat="server" TextMode="MultiLine" MaxLength="1000"
                    Height="58px" Width="316px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="btnCaseMatPro" type="button" value="提交" />&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="btnCaseMatPrCancle" type="button" value="取消" />
            </td>
        </tr>
    </table>
    <table id="tbEvidence" width="600px" style="display: none">
        <tr>
            <td align="right">
                名称
            </td>
            <td>
                <asp:TextBox ID="txtEvidenceName" runat="server" MaxLength="64"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right">
                来源
            </td>
            <td>
                <asp:DropDownList ID="dropSource" runat="server">
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td align="right">
                种类
            </td>
            <td>
                <asp:DropDownList ID="dropMaterialType" runat="server">
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top">
                证明对象内容
            </td>
            <td>
                <asp:TextBox ID="txtInfoContent" runat="server" TextMode="MultiLine" Height="58px"
                    Width="316px" MaxLength="1000"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top">
                页码
            </td>
            <td>
                <asp:TextBox ID="txtPageNumber" runat="server" MaxLength="128"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top">
                上传证据
            </td>
            <td>
                <LAWYEE:FileUpload ID="FileUpload1" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="btnEvidence" type="button" value="提交" />&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="btnEvidenceCancle" type="button" value="取消" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

原文地址:https://www.cnblogs.com/dyfzwj/p/2017920.html