用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>