在公司写的一张页面，涉及Table的ADD，Delete，Update，Select

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<com.nowdocs.nowsource.Admin.ViewModels.SiteConfiguration.EntityTypeAttributeViewModel>" %>
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>"
    type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.tablednd_0_5.js") %>" type="text/javascript"></script>
<script type="text/javascript">
    function resetValidation() {
        $(".field-validation-error").empty();
    }

    $(function () {
        $(document).ready(function () {
            var opt = $("#strControlTypeCode").val();
            SetShoworHide(opt);
            setCssRules();
            $("#myTable").tableDnD();

            $(".up,.down").live('click', function () {
                var row = $(this).parents("tr:first");
                if ($(this).is(".up")) {
                    row.insertBefore(row.prev());
                } else {
                    row.insertAfter(row.next());
                }
            });
            $(".add").click(function () {
                $('#myTable tr:last').after('<tr><td><a href="#" class="up">Up</a><a href="#" class="down">Down</a></td><td>New</td></tr>');
                setCssRules();
                $("#myTable").tableDnD();
            });
        });

        function setCssRules() {
            // this would be better implemented in a CSS file
            jQuery('#myTable tr:not(\'#rowHeader\')')
            .css('cursor', 'pointer')
            .mouseover(function () {
                jQuery(this).css('background-color', '#c0c0c0');
            })
            .mouseout(function () {
                jQuery(this).css('background-color', '#ffffff');
            });
        }

        function SetShoworHide(opt) {
            if (opt != "") {
                if (opt == "text") {
                    $("#comm").slideDown();
                    $("#typeAttributeDiv").slideUp();
                    $("#trHeight").slideUp();
                }
                if (opt == "textarea") {
                    $("#comm").slideDown();
                    $("#typeAttributeDiv").slideUp();
                    $("#trHeight").slideDown();
                }
                if (opt == "checkbox" || opt == "multiselect" || opt == "radio" || opt == "select") {
                    $("#comm").slideUp();
                    $("#typeAttributeDiv").slideDown();
                }
            }
        }

        $('#strControlTypeCode').change(function () {
            var opt = $(this).val();
            SetShoworHide(opt);
        });

        $('#myTable td').live('click', function () {
            var tr = $(this).parent();
            for (var i = 0; i < tr.children().length; i++) {
                if (tr.children().get(i) == this) {
                    var column = i;
                    break;
                }
            }

            var tbody = tr.parent();
            for (var j = 0; j < tbody.children().length; j++) {
                if (tbody.children().get(j) == tr.get(0)) {
                    var row = j;
                    break;
                }
            }

            for (var i = 0; i < tr.children().length; i++) {
                for (var j = 0; j < tbody.children().length; j++) {
                    var tempcell = $('#myTable tr:eq(' + j + ') td:eq(' + i + ')');
                    $(tempcell).css('background-color', '#ffffff');
                }
            }
            var cell = $('#myTable tr:eq(' + row + ') td:eq(' + column + ')');
            if (cell.length == 0) {
                //alert('Undefined');
            }
            else if (column == 1 || column == 2) {
                //alert(row+'  '+column+' '+cell.text());
                column = 1;
                $('#row').val(row);
                $('#column').val(column);
                $('#SelectValue').val(cell.text());
                $(cell).css('background-color', '#c0c0c0');
            }

        });

        var flag_UpdateOrAdd = "0";
        $('#ViewEdit').change(function () {
            var opt = $(this).val();
            var selectValue = $('#SelectValue').val().toString().trim();
            if (opt != "0") {
                //add
                if (opt == "1") {
                    flag_UpdateOrAdd = "1";
                    openAddDialog(flag_UpdateOrAdd);
                    //$("#dialog-add-form").dialog("open");
                }
                //edit
                if (opt == "2") {
                    if (selectValue != '') {
                        flag_UpdateOrAdd = "2";
                        $('#name').val(selectValue);
                        openAddDialog(flag_UpdateOrAdd);
                        //$("#dialog-add-form").dialog("open");
                    }
                }
                //delete
                if (opt == "3") {
                    if (selectValue != '') {
                        $("#dialog-delete-confirm").dialog("open");

                        //var row = $('#row').val().toString().trim();
                        //$("#myTable").find("tr:eq(" + row + ")").remove();

                        //                        var column = $('#column').val().toString().trim();
                        //                        var cell = $('#myTable tr:eq(' + row + ') td:eq(' + column + ')');
                        //                        cell.remove();
                        //                        var column1 = parseInt($('#column').val()) + 1;
                        //                        cell1 = $('#myTable tr:eq(' + row + ') td:eq(' + column1 + ')');
                        //                        cell1.remove();
                    }
                }
                //set default
                if (opt == "4") {
                    if (selectValue != '') {
                        //alert(selectValue);
                        $("#myTable tr").each(function () {
                            $(this).find("td:eq(2)").css('display', 'none');
                            if ($(this).find("td:eq(1)").text().trim() == selectValue) {
                                $(this).find("td:eq(2)").css('display', 'block');
                            }
                        });

                    }
                }
            }
            $(this).val("0");
        });

        var name = $("#name"),
			allFields = $([]).add(name),
			tips = $(".validateTips");

        function updateTips(t) {
            tips
				.text(t)
				.addClass("ui-state-highlight");
            setTimeout(function () {
                tips.removeClass("ui-state-highlight", 1500);
            }, 500);
        }

        function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("Length of " + n + " must be between " +
					min + " and " + max + ".");
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(o, regexp, n) {
            if (!(regexp.test(o.val()))) {
                o.addClass("ui-state-error");
                updateTips(n);
                return false;
            } else {
                return true;
            }
        }

        var title_var = '';
        function openAddDialog(flag_UpdateOrAdd) {

            if (flag_UpdateOrAdd == '1') {
                title_var = "<%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.AddAnAttributeValueTitle %>";
            }
            else if (flag_UpdateOrAdd == '2') {
                title_var = "<%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.EditAnAttributeValueTitle %>";
            }

            $("#dialog-add-form").dialog("open");
            $("#dialog-add-form").dialog("option", "title", title_var);
        }

        $("#dialog:ui-dialog").dialog("destroy");
        $("#dialog-add-form").dialog({
            title: title_var,
            autoOpen: false,
            height: 150,
            width: 350,
            modal: true,
            buttons: {
                "<%: com.nowdocs.nowsource.Admin.Resources.Common.Save %>": function () {
                    var bValid = true;
                    allFields.removeClass("ui-state-error");
                    bValid = bValid && checkLength(name, "username", 1, 100);
                    if (bValid) {
                        if (flag_UpdateOrAdd == "1") {
                            $("#myTable tbody").append("<tr><td style='display: none'>" +
                                                    '<a href="#" class="up">Up</a><a href="#" class="down">Down</a></td>' +
                        							"<td>" + name.val() + "</td>" +
                                                    "<td style='display: none'><span>*</span></td>" +
                        						"</tr>");
                        } else if (flag_UpdateOrAdd == "2") {
                            var row = $('#row').val().toString().trim();
                            var column = $('#column').val().toString().trim();
                            var cell = $('#myTable tr:eq(' + row + ') td:eq(' + column + ')');
                            cell.text(name.val());
                            $('#row').val(row);
                            $('#column').val(column);
                            $('#SelectValue').val(cell.text());
                        }

                        setCssRules();
                        $("#myTable").tableDnD();
                        $(this).dialog("close");
                        flag_UpdateOrAdd = "0";
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#dialog-delete-confirm").dialog({
            autoOpen: false,
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "<%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.Okbtn %>": function () {
                    var row = $('#row').val().toString().trim();
                    $("#myTable").find("tr:eq(" + row + ")").remove();
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>
<div id="dialog-delete-confirm" title="<%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.DeleteEntityAttributeTitle %>">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        <%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.DeleteEntityAttributeContent%></p>
</div>
<div id="dialog-add-form" title="<%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.EditAnAttributeValueTitle%>">
    <p class="validateTips">
    </p>
    <table cellpadding="4" cellspacing="4" width="100%" class="admin-form">
        <tr>
            <th style="width: 350px">
                <label for="name">
                    <span class="error">*</span><%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.ValuePopUp%>:</label>
            </th>
            <td class="TdWidth">
                <input type="text" name="name" id="name" style="width: 180px" maxlength="98" />
            </td>
        </tr>
    </table>
</div>
<div id="group-edit" class="admin-panel main-panel" style="width: 540px;">
    <div class="title" style="text-align: left">
        <%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.EditCustomeAttributeTitle %>
    </div>
    <div class="title">
        <%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.TypeAttributeDetailTitle %>
    </div>
    <%using (Html.BeginForm())
      { %>
    <div>
        <div class="wrap">
            <% Html.EnableClientValidation(true); %>
            <table cellpadding="4" cellspacing="4" width="100%" class="admin-form">
                <tr>
                    <td colspan="2" align="center">
                        <div class="error">
                            <%: Html.ValidationMessage("sameTypeAttributeName")%>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.intEntityTypeID)%>:
                    </th>
                    <td class="TdWidth">
                        <%: Html.DropDownList("intEntityTypeID")%>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.strEntityTypeAttributeName)%>:<span class="error">*</span>
                    </th>
                    <td class="TdWidth">
                        <%: Html.TextBoxFor(model => model.strEntityTypeAttributeName, new { maxlength = 250, @class = "TextBoxWidth" })%>
                        <p>
                            <span class="error">
                                <%: Html.ValidationMessageFor(model => model.strEntityTypeAttributeName)%></span>
                        </p>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.strEntityTypeAttributeDisplayLabel)%>:<span class="error">*</span>
                    </th>
                    <td class="TdWidth">
                        <%: Html.TextBoxFor(model => model.strEntityTypeAttributeDisplayLabel, new { maxlength = 250, @class = "TextBoxWidth" })%>
                        <p>
                            <span class="error">
                                <%: Html.ValidationMessageFor(model => model.strEntityTypeAttributeDisplayLabel)%></span>
                        </p>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.strEntityTypeAttributeReportLabel)%>:<span class="error">*</span>
                    </th>
                    <td class="TdWidth">
                        <%: Html.TextBoxFor(model => model.strEntityTypeAttributeReportLabel, new { maxlength = 250, @class = "TextBoxWidth" })%>
                        <p>
                            <span class="error">
                                <%: Html.ValidationMessageFor(model => model.strEntityTypeAttributeReportLabel)%></span>
                        </p>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.strControlTypeCode)%>:<span class="error">*</span>
                    </th>
                    <td class="TdWidth">
                        <%: Html.DropDownList("strControlTypeCode")%>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.blnEntityTypeAttributeRequired)%>:
                    </th>
                    <td class="TdWidth">
                        <%: Html.CheckBoxFor(model => model.blnEntityTypeAttributeRequired, new { @class = "CheckBox" })%>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.blnEntityTypeAttributeSearchCriteria)%>:
                    </th>
                    <td class="TdWidth">
                        <%: Html.CheckBoxFor(model => model.blnEntityTypeAttributeSearchCriteria, new { @class = "CheckBox" })%>
                    </td>
                </tr>
                <tr style="display: none;">
                    <th>
                    </th>
                    <td>
                        <%: Html.EditorFor(model => model.blnEntityTypeAttributeActive)%>
                    </td>
                </tr>
            </table>
            <div id="comm">
                <table cellpadding="4" cellspacing="4" width="100%" class="admin-form">
                    <tr>
                        <th style="width: 350px">
                            <%: Html.LabelFor(model => model.intValidationTypeID)%>:
                        </th>
                        <td class="TdWidth">
                            <%: Html.DropDownList("intValidationTypeID")%>
                        </td>
                    </tr>
                    <tr>
                        <th style="width: 350px">
                            <%: Html.LabelFor(model => model.shoEntityTypeAttributeMinimumLength)%>:<span class="error">*</span>
                        </th>
                        <td class="TdWidth">
                            <%: Html.TextBoxFor(model => model.shoEntityTypeAttributeMinimumLength, new { maxlength = 2, @class = "TextBoxWidth" })%>
                            <p>
                                <span class="error">
                                    <%: Html.ValidationMessageFor(model => model.shoEntityTypeAttributeMinimumLength)%></span>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <th style="width: 350px">
                            <%: Html.LabelFor(model => model.shoEntityTypeAttributeMaximumLength)%>:<span class="error">*</span>
                        </th>
                        <td class="TdWidth">
                            <%: Html.TextBoxFor(model => model.shoEntityTypeAttributeMaximumLength, new { maxlength = 2, @class = "TextBoxWidth" })%>
                            <p>
                                <span class="error">
                                    <%: Html.ValidationMessageFor(model => model.shoEntityTypeAttributeMaximumLength)%></span>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <th style="width: 350px">
                            <%: Html.LabelFor(model => model.strEntityTypeAttributeMinimumValue)%>:
                        </th>
                        <td class="TdWidth">
                            <%: Html.TextBoxFor(model => model.strEntityTypeAttributeMinimumValue, new { maxlength = 19, @class = "TextBoxWidth" })%>
                        </td>
                    </tr>
                    <tr>
                        <th style="width: 350px">
                            <%: Html.LabelFor(model => model.strEntityTypeAttributeMaximumValue)%>:
                        </th>
                        <td class="TdWidth">
                            <%: Html.TextBoxFor(model => model.strEntityTypeAttributeMaximumValue, new { maxlength = 19, @class = "TextBoxWidth" })%>
                        </td>
                    </tr>
                    <tr id="trHeight">
                        <th style="width: 350px">
                            <%: Html.LabelFor(model => model.bytEntityTypeAttributeHeight)%>:<span class="error">*</span>
                        </th>
                        <td class="TdWidth">
                            <%: Html.TextBoxFor(model => model.bytEntityTypeAttributeHeight, new { maxlength = 1, @class = "TextBoxWidth" })%>
                            <p>
                                <span class="error">
                                    <%: Html.ValidationMessageFor(model => model.bytEntityTypeAttributeHeight)%></span>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <th style="width: 350px">
                            <%: Html.LabelFor(model => model.bytEntityTypeAttributeWidth)%>:<span class="error">*</span>
                        </th>
                        <td class="TdWidth">
                            <%: Html.TextBoxFor(model => model.bytEntityTypeAttributeWidth, new { maxlength = 1, @class = "TextBoxWidth" })%>
                            <p>
                                <span class="error">
                                    <%: Html.ValidationMessageFor(model => model.bytEntityTypeAttributeWidth)%></span>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div id="typeAttributeDiv">
        <div class="title">
            <%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.AttributeValuesTitle %>
        </div>
        <div id="typeAttribute" style="height: 205px; background-color: #CFE1E5">
            <table cellpadding="4" cellspacing="4" width="100%" class="admin-form">
                <tr>
                    <th style="width: 350px">
                        <%: Html.LabelFor(model => model.entityTypeAttributeValueList)%>:
                    </th>
                    <td class="TdWidth">
                        <div class="wrap" id="ChildGroupList" style="display: block;">
                            <table id="myTable" style="width: 100%; height: 100%">
                                <tr>
                                    <td style="display: none">
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        One444444444iiiiiiiiiiifdsfsdfsfsfsdfsdfsd
                                    </td>
                                    <td style="display: none">
                                        <span style="font-weight: bold;">*</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="display: none">
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Two
                                    </td>
                                    <td style="display: none">
                                        <span style="font-weight: bold;">*</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="display: none">
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Three
                                    </td>
                                    <td style="display: none">
                                        <span style="font-weight: bold;">*</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="display: none">
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Four
                                    </td>
                                    <td style="display: none">
                                        <span style="font-weight: bold;">*</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="display: none">
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Five
                                    </td>
                                    <td style="display: none">
                                        <span style="font-weight: bold;">*</span>
                                    </td>
                                </tr>
                            </table>
                            <br>
                            <a href="#" class="add" style="display: none">Add new</a>
                        </div>
                        <%--<div class="wrap" id="ChildGroupList" style="display: block;">
                            <ul>
                                <% if (Model.entityTypeAttributeValueList != null)
                                   {
                                       foreach (var link in Model.entityTypeAttributeValueList)
                                       {
                                %>
                                <li><a>
                                    <%: link.strEntityTypeAttributeValue%>
                                </a>
                                    <%: Html.Hidden("EntityTypeAttributeValueID", link.intEntityTypeAttributeValueID)%>
                                </li>
                                <%
                                       }
                                   }%>
                            </ul>
                        </div>--%>
                    </td>
                </tr>
                <tr>
                    <th style="width: 350px">
                        <%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.EditValues %>:
                    </th>
                    <td class="TdWidth">
                        <%: Html.DropDownList("ViewEdit")%>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="buttons" style="height: 30px; background: #859DA1;">
        <input type="submit" value="<%: com.nowdocs.nowsource.Admin.Resources.Common.Save %>" />
        <input type="reset" value="<%: com.nowdocs.nowsource.Admin.Resources.Common.Cancel %>"
            onclick="resetValidation();" />
    </div>
    <%: Html.Hidden("row")%>
    <%: Html.Hidden("column")%>
    <%: Html.Hidden("SelectValue")%>
</div>
<%} %>
</div>