<!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>