可编辑表格，json字符串拼接提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    @media (min-width: 1330px) {
        .container {
            width: 1300px;
        }
    }

    .box {
        /*width: 1524px;*/
        overflow: hidden;
        color: #555;
        margin-left: 50px;
    }

    .newInput {
        padding: 10px 15px;
    }

    .newInput label {
        font-weight: normal;
    }

    .du-btn {
        text-align: center;
        margin: 50px 0;
    }

    .du-btn a {
        margin: 0 30px;
    }

    #du-table tr th, #du-table tr td {
        text-align: center;
    }

    #du-table tr th {
        padding: 20px 5px;
    }

    #du-table tr td {
        max-width: 100px;
        height: auto;
        word-wrap: break-word;
    }

    .add {
        margin: 0 auto;
        display: block;
    }
</style>
<body>
<div class="box">
    <div class="container">
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover" id="du-table">
                <thead>
                <tr>
                    <th v="brand">品牌</th>
                    <th v="model">车型</th>
                    <th v="version">版本</th>
                    <th v="config">配置</th>
                    <th v="color">颜色</th>
                    <th v="num">数量</th>
                    <th v="type">类型</th>
                    <th v="endPrice">结算价</th>
                    <th v="sellPrice">行情价</th>
                    <th v="operate">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="aa">
                        <button type="button" class="btn btn-danger btn-sm aa del">删除</button>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="aa">
                        <button type="button" class="btn btn-danger btn-sm aa del">删除</button>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="aa">
                        <button type="button" class="btn btn-danger btn-sm aa del">删除</button>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="aa">
                        <button type="button" class="btn btn-danger btn-sm aa del">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <button type="button" class="btn btn-warning btn-sm add" style="padding: 6px 28px"><span
                    class="glyphicon glyphicon-plus"></span>添加
            </button>
        </div>
        <div class="du-btn">
            <a href="javascript:;" class="btn btn-danger submit" role="button" style="padding: 6px 38px">提交
            </a>
            <a href="javascript:;" class="btn btn-warning" role="button" style="padding: 6px 38px">
                取消
            </a>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
    var tbody = $("#du-table tbody");
    tbody.dblclick(function (e) {
        var target = $(e.target);
        if (!target.hasClass('aa')) {
            var oldv = target.html();
            if (oldv == "&nbsp") {
                oldv = ""
            }
            target.html("");
            var input = $("<input type='text' value='" + oldv + "'>");
            target.append(input);
            input.focus();
            input.on("blur keydown", function (e) {
                if (e.type == "blur" || (e.type == "keydown" && e.keyCode == 13)) {
                    input.remove();
                    target.html(input.val());
                }
            })
        }
    });
    $(".add").click(function () {
        var tr = $('<tr><td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td> <td></td> <td></td> <td class="aa"> <button type="button" class="btn btn-danger btn-sm aa del">删除</button></td></tr>')
        tr.appendTo(tbody)
    });
    $(tbody).delegate('.del', 'click', function () {
        $(this).parent().parent().remove();
    });
    $(".submit").click(function () {
        var result = [];
        var tr = $("#du-table tbody tr");
        var title = $("table thead tr th");
        var txt = "["
        for (var i = 0; i < tr.length; i++) {
            var aa = '{';
            for (var j = 0; j < tr.eq(0).find('td').length - 1; j++) {
                if (tr.eq(i).find("td").eq(j).html() == "") {
//                        console.log("第" + i + "行第" + j + "个");
                    var input = $("<input type='text'>");
                    tr.eq(i).find("td").eq(j).append(input);
                    input.focus();
                    input.on("blur keydown", function (e) {
                        if (e.type == "blur" || (e.type == "keydown" && e.keyCode == 13)) {
                            input.remove();
                            tr.eq(i).find("td").eq(j).html(input.val());
                        }
                    });
                    return;
                }
                if (j == tr.eq(0).find('td').length - 2) {
                    aa += '"' + title.eq(j).attr("v") + '":"' + tr.eq(i).find("td").eq(j).html() + '"';
                } else {
                    aa += '"' + title.eq(j).attr("v") + '":"' + tr.eq(i).find("td").eq(j).html() + '"' + ",";
                }
            }
            if (i == tr.length - 1) {
                aa += '}';
            } else {
                aa += '},';
            }
            txt += aa;
        }
        txt += "]";
        console.log(txt);

        /*   var tr=$("#du-table tbody tr");
         var title=$("table thead tr th");
         var JsonData = {
         brand:"",model:"",version:"", config:"",color:"",num:"", type:"",endPrice:"",sellPrice:""
         };
         var rows = document.getElementById("du-table").rows.length;
         //获得行数(包括thead)
         var colums = document.getElementById("du-table").rows[0].cells.length;
         //获得列数
         for (var i = 1;i < rows;i++) {
         var JsonData = new Object();
         JsonData.brand = document.getElementById("du-table").rows[i].cells[0].innerHTML;
         JsonData.model = document.getElementById("du-table").rows[i].cells[1].innerHTML;
         JsonData.version = document.getElementById("du-table").rows[i].cells[2].innerHTML;
         JsonData.config = document.getElementById("du-table").rows[i].cells[3].innerHTML;
         JsonData.color = document.getElementById("du-table").rows[i].cells[4].innerHTML;
         JsonData.num = document.getElementById("du-table").rows[i].cells[5].innerHTML;
         JsonData.type = document.getElementById("du-table").rows[i].cells[6].innerHTML;
         JsonData.endPrice = document.getElementById("du-table").rows[i].cells[7].innerHTML;
         JsonData.sellPrice = document.getElementById("du-table").rows[i].cells[8].innerHTML;
         result.push(JsonData);
         }
         var obj = JSON.stringify(result);
         console.log(obj);*/
        $.ajax({
            url: '1.json',
            data: {resule: txt},
            type: 'post',
            dataType: 'json',
            success: function (data) {
                console.log(data)
            }
        })

    })
</script>
</html>
可编辑表格，json字符串拼接提交

猜你喜欢
