用jQuery对TABLE进行增、删、改操作

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

<%@ 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>

        </tr>
        <tr style="text-align:center;">

            <td>
             张山
            </td>
            <td>
               男
            </td>
            <td>
               15
            </td>
            <td>
               18255350715
            </td>

        </tr>

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

来源：oschina

链接：https://my.oschina.net/u/924903/blog/99078

标签

jquery

表格

增删改

第一次做请多理解哈