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

来源：互联网发布：郑州863软件孵化器编辑：程序博客网时间：2024/05/23 14:07

效果图

这里写图片描述
- 点击单个可以进行修改
- 点击修改所有的表格都可以进行修改
- 点击保存所有的数据可以获取并打印出来
- 本人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>

阅读全文

0 0