jQuery实现可以编辑的表格实例详解

最新推荐文章于 2021-08-21 08:36:52 发布

Presbyterian

最新推荐文章于 2021-08-21 08:36:52 发布

阅读量2.1k

点赞数

分类专栏： js常用的方法 js动画文章标签： jquery 实例数据

js常用的方法同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

js动画

6 篇文章 0 订阅

订阅专栏

效果图

这里写图片描述
- 点击单个可以进行修改
- 点击修改所有的表格都可以进行修改
- 点击保存所有的数据可以获取并打印出来
- 本人demo需要引入jq文件

代码见如下（有详细的注解）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
</head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<style>
    p {
        text-align: center;
    }
</style>
<body>
<table id="tab" align="center" border="1">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>部门</th>
        <th>工号</th>
    </tr>
</table>
<p><input id="btn1" type="button" value="保存"/><input id="btn2" type="button" value="修改"/></p>
<script>
    $(document).ready(function () {
        var data = [{nub: "1", name: "Tim", apartment: "人事部", worknub: "1401"},
            {nub: "2", name: "TompSon", apartment: "咨询部", worknub: "1402"},
            {nub: "3", name: "chanel", apartment: "安保部", worknub: "1403"}]//JSon模拟数据
        var tab1 = $("#tab")//H获取表格盒子的内容
        $.each(data, function (index, item) {
            var row = $("<tr></tr>");
            $.each(item, function (name, value) {
                var td = $("<td></td>").html(value);
                row.append(td);
            });
            tab1.append(row);
        });//为表单填充对应JSon值
        $("#tab").find("tr:not(:first)").each(function () {
            $(this).children().eq("0").addClass("nub");
            $(this).children().eq("1").addClass("name");
            $(this).children().eq("2").addClass("apartment");
            $(this).children().eq("3").addClass("worknub");
        });//为每个对应的列添加class名
        $("#tab").find("td").click(function a() {
            var inputSize = $(this).find("input").size();
            if (inputSize > 0) return;
            var tdText = $(this).text();
            var inputObj = $('<input type="text" />');
            $(this).empty().append(inputObj);
            inputObj.val(tdText); //给单个td绑定单击事件，当点击时增加<input/>
            $("#tab").find("input").blur(function () {
                var inputText = $(this).val();
                $(this).parent().html(inputText);
                $(this).click(a);
            }); //当input失去焦点时，变量inputText保存当前值，清空当前父元素的内容并填充文本，在给当前td重新拥有点击事件
        });
        $('#btn2').on('click', function () {//修改-使所有框变成可编辑状态
            for (var i = $("#tab").find("td").length - 1; i >= 0; i--) {//
                console.log($("#tab").find("td")[i])
                var item = $($("#tab").find("td")[i])
                var inputSize = item.find("input").size();
                if (inputSize > 0) return;
                var tdText = item.text();
                var inputObj = $('<input type="text" />');
                item.empty().append(inputObj);
                inputObj.val(tdText); //当单击修改时，变量inputText保存当前值，
            }
        })
        $("#btn1").click(function () {
            var inputObj = $("#tab").find("input[type='text']");
            if (inputObj.size() > 0) {
                inputObj.each(function () {
                    var val = $(this).val();
                    $(this).parent().empty().html(val);
                });
            };//单击保存按钮，使其清空所有input
            var JsonText = "";
            $("#tab").find("tr:not(:first)").each(function () {
                JsonText += "{";
                $(this).find("td").each(function () {
                    JsonText += '"' + $(this).attr("class") + '":"' + $(this).text() + '",';
                });
                JsonText = JsonText.substr(0, JsonText.length - 1);
                JsonText += "},";
            });
            JsonText = JsonText.substr(0, JsonText.length - 1);
            console.log("[" + JsonText + "]");
        });    //取出数据拼接成JSon格式
    });
</script>
</body>
</html>