<!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 == " ") { 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字符串拼接提交
猜你喜欢
转载自blog.csdn.net/ddwddw4/article/details/80097648
今日推荐
周排行