使用jQuery+html+css实现本地网页上的增删改

前言

前阵子用jQuery实现了个简单的本地记事本网页，仅包含标记、增、删、改功能，话不多说，先看效果。

实现思路

大概功能如下：

• 1 添加功能：初始时submit为添加功能，在text中输入事项（不为空）后点击添加即可显示在下列表格中。
• 2 删除功能：添加后的事项点击mark标记后才能删除，否则提示删除失败。
• 3 修改功能：未标记事项才可修改，点击需要修改的事项对应的update按钮，事项会回显到text框中，这时submit进入修改状态，编辑之后点击submit即可修改对应事项。

具体实现方式

由于篇幅限制，本文只介绍jQuery实现增、删、改的部分，对于html+css的页面设计不做赘述。

增加部分

思路：由于需要将text中的内容增加到标题下面的表格中，所以需要先定义字符串获取text中的文本，jQuery中定义字符串语法为var text = xxx;；获取text文本框中的文本语法为$("input").val()；然后使用.append()方法将html代码加入到html文件中。具体如下：

	/*对按钮button绑定click事件*/
	$(".btn").on("click", function() {
		/*获取text文本框文本*/
        var text = $("input").val()
        /*.append()方法将html代码写进html文件对应位置*/
        $(".main .table tbody").append('<tr>' +
            '<td>' + text + '</td>' +
            '<td><button class="del">del</button><button class="mark">mark</button><button class="update">update</button></td>' +
            '</tr>')
         /*添加后清空text文本框*/
        $("input").val("")
    })

删除部分

思路：点击删除按钮后找到待删除的事项，使用remove()删除即可。

	/*由于需要选择的事项为动态添加的，所以需要使用未来事件绑定方式*/
	$("body").on("click", ".del", function() {
        if (confirm("是否确定删除？")) {
        	/*遍历找到del删除按钮所在的行删除*/
            $(this).parent().parent().remove()
            alert("删除成功！")
        } else {
            alert("取消删除")
        }
    })

修改部分

思路：修改部分分为两个过程：1、将表中数据回显到text文本框中。2、修改文本框数据并保存。

回显

思路：回显部分需要在点击修改按钮后将对应行的表格数据写回到text中。具体代码如下：

	/*使用未来绑定事件方式绑定*/
 $("body").on("click", ".update", function() {
 	/*遍历找到修改按钮对应行的表格文本数据，保存到字符串中*/
    var input = $(this).parent().prev().text()
    /*将字符串中保存的文本写入到text文本框中*/
    $("input").val(input)
    //用于判断修改状态以及遍历表格确定要修改的行号
    currentIndex = $(this).parent().parent().index() + 1
})

修改

由于修改与添加共用一个按钮，所以我们需要设置一个变量来判断/修改submit按钮的状态（添加/修改），之后遍历表格寻找到被点击修改按钮update的行，找到之后将text文本写入到对应行的第一列中。
具体代码如下：

var currentIndex //未赋值时布尔类型为flase
$("body").on("click", ".btn", function() {
    // 获取input中文字
    var text = $(".input_self").val()
    // 判断处于添加状态还是修改状态
    if (currentIndex) {
        // 修改状态，each(function({})遍历每一个tr
        $(".main .table tbody tr").each(function() {
                // 通过index找到被点击update的行
                if (($(this).index() + 1) == currentIndex) {

                    // 将input内容写到对应行第一列中
                    $(this).find("td").first().text(text)

                    // 点击添加之后将input清空
                    $(".input_self").val("")
                }
            })
    }

    // 设置button默认状态为添加状态
    currentIndex = undefined
})

结语

本文分享了具有增、删、改功能的一个本地网页，其中难点在于修改与添加共用一个按钮，需要增加条件判断按钮状态。如有不妥之处，恳请各位大佬交流。