在公司写的一张页面，涉及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="#" || 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="#" + 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 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 cellspacing="4" width="100%" name="name" id="name" style="width: 180px" maxlength="98" /> </td> </tr> </table></div><div id="group-edit" style="width: 540px;"> <div style="text-align: left"> <%: com.nowdocs.nowsource.Admin.Resources.EntityTypeAttribute.EditCustomeAttributeTitle %> </div> <div cellspacing="4" width="100%" align="center"> <div })%> <p> <span })%> <p> <span })%> <p> <span })%> </td> </tr> <tr> <th style="width: 350px"> <%: Html.LabelFor(model => model.blnEntityTypeAttributeSearchCriteria)%>: </th> <td })%> </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%" })%> <p> <span })%> <p> <span })%> </td> </tr> <tr> <th style="width: 350px"> <%: Html.LabelFor(model => model.strEntityTypeAttributeMaximumValue)%>: </th> <td })%> </td> </tr> <tr id="trHeight"> <th style="width: 350px"> <%: Html.LabelFor(model => model.bytEntityTypeAttributeHeight)%>:<span })%> <p> <span })%> <p> <span style="height: 205px; background-color: #CFE1E5"> <table cellpadding="4" cellspacing="4" width="100%" id="ChildGroupList" style="display: block;"> <table id="myTable" style="width: 100%; height: 100%"> <tr> <td style="display: none"> <a href="#" style="display: none">Add new</a> </div> <%--<div 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 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>?