需求1:点击新增是,在表第一行给出输入输入框输入信息
需求2:点击保存时,将输入输入框的值保存到表中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
width: 720px;
text-align: center;
}
</style>
</head>
<body>
<input type="button" name="" id="btnInsert" value="新增" />
<input type="button" name="" id="btnSave" value="保存" />
<br />
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<th hidden="hidden"></th>
<th width="100">姓名</th>
<th width="100">性别</th>
<th width="100">年龄</th>
<th width="200">学院</th>
<th width="220">地址</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
</body>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
//0.0 数据源
var list = [{
Id: 1,
Name: "张三",
Sex: "男",
Age: "21岁",
College: "数学学院",
Address: "广东省韶关市"
}, {
Id: 2,
Name: "李四",
Sex: "男",
Age: "21岁",
College: "数学学院",
Address: "广东省韶关市"
}];
LoadList(list);
//1.0 获取操作的元素
var btnInsert = $("#btnInsert");
var btnSave = $("#btnSave");
//2.0 点击新增按钮,注册事件
btnInsert.click(function() {
var html = "<tr>";
html += "<td hidden='hidden'>0</td>";
html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
html += "<td><input type='text' style='width:100%;text-align:center;' value=''/></td>"
html += "</tr>";
$("#tbody tr:first").before(html);
});
//3.0 点击保存,注册事件
btnSave.click(function() {
var newArray = [];
//3.1 获取tbody下的tr
$("#tbody tr").each(function(index, item) {
//3.2 获取第一个td的值
var id = $(item).children("td").get(0).innerHTML;
var tableData = new Object();
if(id == 0) {
id = Math.floor(Math.random() * 100);
tableData.Id = id;
var inputList = $(item).find("input");
tableData.Name = inputList[0].value;
tableData.Sex = inputList[1].value;
tableData.Age = inputList[2].value;
tableData.College = inputList[3].value;
tableData.Address = inputList[4].value;
newArray.push(tableData);
} else {
tableData["Id"] = id;
tableData.Name = $(item).children("td").get(1).innerHTML;
tableData.Sex = $(item).children("td").get(2).innerHTML;
tableData.Age = $(item).children("td").get(3).innerHTML;
tableData.College = $(item).children("td").get(4).innerHTML;
tableData.Address = $(item).children("td").get(5).innerHTML;
newArray.push(tableData);
}
});
//4.0 清空tbody
$("#tbody").html("");
//5.0 绑定数据
LoadList(newArray);
});
});
function LoadList(list) {
//1.0 获取tbody对象
var tbody = $("#tbody");
var html = "";
//2.0 遍历数据源
list.forEach(function(e) {
html += "<tr>";
html += "<td hidden='hidden'>" + e["Id"] + "</td>"
html += "<td>" + e["Name"] + "</td>"
html += "<td>" + e["Sex"] + "</td>"
html += "<td>" + e["Age"] + "</td>"
html += "<td>" + e["College"] + "</td>"
html += "<td>" + e["Address"] + "</td>"
html += "</tr>";
});
//3.0 绑定到tbody中去;
tbody.append(html);
}
</script>
</html>
视图界面:
新增一行王五并保存