【jQuery实现table增删改查】

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<style>
		* {
			margin: 0;
		}
        table {
			 800px;
			margin: 0 auto;
			border: 1px solid #ddd;
			border-collapse: collapse;
			text-align: center;
			margin-top: 50px;
		}
        td {
			height: 40px;
			border: 1px solid #ddd;
		}
		input {
			 100px;
			border: 1px solid #ddd;
			outline: none;
			padding: 6px;
			border-radius: 4px;
			display: none;
		}
		.btn {
			border: none;
			outline: none;
			cursor: pointer;
			padding: 6px 8px;
			color: #fff;
			border-radius: 4px;
		}
		.btn-red {
			background: darkred;
		}
		.que_change {
			display: none;
			background: #9e9e9e;
		}
		.del_change {
			background: #FF6428;
		}
		.btn-add {
			background: green;
			 200px;
		}
	</style>
</head>

<body>

	<table>
		<thead>
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>成绩</td>
				<td>操作</td>
			</tr>
		</thead>

		<tbody>

		</tbody>
		<!--<tr>
			<td>
				<span>小明</span>
				<input type="text" />
			</td>
			<td>
				<span>20</span>
				<input type="text" />
			</td>
			<td>
				<span>80</span>
				<input type="text" />
			</td>
			<td>
				<button class="btn btn-red change">修改</button>
			</td>
		</tr>-->
		<tfoot>
			<tr class="btn">
				<td colspan="4">
					<button class="btn btn-add">增加</button>
				</td>
			</tr>
		</tfoot>

	</table>

	<script>
		$.ajax({
			type: "get",
			url: "data/data.json",
			success: function(res) {
                var str = ""
				for(var i = 0; i < res.length; i++) {
					str += '<tr><td><span>' + res[i].name + '</span><input type="text" /></td><td><span>' + res[i].age + '</span><input type="text"  /></td><td><span>' + res[i].score + '</span><input type="text" /></td><td><button class="btn btn-red change">修改</button> <button class="btn que_change">确定</button> <button class="btn del_change">删除</button></td></tr>'
				}
				$("tbody").append(str)
			}
		})

// 修改
var arrInfo = []
$(document).on("click", ".change", function() {
arrInfo = []
$(this).hide()
$(this).siblings(".que_change").show()

			$(this).parent().siblings().find("span").each(function() {
				arrInfo.push($(this).text())
			})

			$(this).parent().siblings().find("input").each(function(i) {
				$(this).val(arrInfo[i])
			})

			$(this).parent().siblings().find("span").hide()
			$(this).parent().siblings().find("input").show()

		})

// 确定
var arrList = []

		$(document).on("click", ".que_change", function() {
			arrList = []
			$(this).hide()
			$(this).siblings(".change").show()
			$(this).parent().siblings().find("input").each(function() {
				arrList.push($(this).val())
			})

			$(this).parent().siblings().find("span").each(function(i) {
				$(this).text(arrList[i])
			})
			$(this).parent().siblings().find("span").show()
			$(this).parent().siblings().find("input").hide()
		})

// 增加
$(".btn-add").click(function() {
var str = '<span style="display: none";> '
$("tbody").append(str)
$(this).parents("tr").prev().find(".que_change").text("确定")
$(this).parents("tr").prev().find(".re_name").show().siblings().hide()
$(this).parents("tr").prev().find(".re_age").show().siblings().hide()
$(this).parents("tr").prev().find(".re_score").show().siblings().hide()
})
//删除
$(function() {
$(document).on("click", ".del_change", function() {
$(this).parents("tr").remove()
})
})

</body>