用jQuery對TABLE進行增、刪、改操做

<%@ Page Title="關於咱們" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="About.aspx.cs" Inherits="About" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).ready(function () {
            var tdNods = $("td");
            tdNods.click(tdClick);
        });
        function tdClick() {
            var td = $(this);
            var tdText = td.text();
            td.empty();
            //新建一個輸入框
            var input = $("<input>");
            //將保存的文本內容賦值給輸入框
            input.attr("value", tdText);
            //將輸入框添加到td中
            td.append(input);
            //給輸入框註冊事件，當失去焦點時就能夠將文本保存起來
            input.blur(function () {
                //將輸入框的文本保存
                var input = $(this);
                var inputText = input.val();
                //將td的內容，即輸入框去掉,而後給td賦值
                var td = input.parent("td");
                td.html(inputText);
                //讓td從新擁有點擊事件
                td.click(tdClick);

            });
            input.keyup(function (event) {
                //1.獲取當前用戶按下的鍵值
                //解決不一樣瀏覽器得到事件對象的差別,
                // IE用自動提供window.event，而其餘瀏覽器必須顯示的提供，即在方法參數中加上event
                var myEvent = event || window.event;
                var keyCode = myEvent.keyCode;
                //2.判斷是不是ESC鍵按下
                if (keyCode == 27) {
                    input.val(tdText);
                }
            });
            //將輸入框中的文本高亮選中
            //將jquery對象轉化爲DOM對象
            var inputDom = input.get(0);
            inputDom.select();
            //將td的點擊事件移除
            td.unbind("click");
        }

        $("#add").click(function () {
            var tdcount = $("tr").length;
            //alert(tdcount);
            $("table").append("<tr><td><input></td><td><input></td><td><input></td><td><input></td></tr>");
            var tdNod = $("td");
            tdNod.click(tdClick);

        });
        $("#del").click(function () {
            var counts = $("tr").length;
            if (counts > 1) {
                var tdname = $("td").eq(counts);
                tdname.remove();
                counts++;
            }
            else {
                alert("第一項不能刪除！！");
            }

        });
    });

 

</script>
<button id="add">添加</button>
<button id="del">刪除</button>
<button id="edit">修改</button>

<form id="form1" action="About.aspx">
    <table style="width:80%;   table-layout:inherit; text-align:center;
     border:2px; border-collapse:inherit; ">
       
        <tr style="background-color:#BCD2EE;">
           <th>姓名</th>
           <th>性別</th>
           <th>年齡</th>
           <th>電話</th>      
        </tr>
        <tr style=" text-align:center;">
      
            <td>
             張山
            </td>
            <td>
               男
            </td>
            <td>
               15
            </td>
            <td>
               18255350715
            </td>

        </tr>
        <tr style="text-align:center;">
      
            <td>
             張山
            </td>
            <td>
               男
            </td>
            <td>
               15
            </td>
            <td>
               18255350715
            </td>

        </tr>
       
    </table>
</form>
</asp:Content>