jQuery实现表格的添加删除行-tr

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#form {
				width: 480px;
				margin: 30px auto;
				border: 1px solid #eee;
				border-radius: 5px;
				padding: 10px;
				line-height: 30px;
				position: relative;
			}

			button {
				position: absolute;
				right: 10px;
				bottom: 10px;
			}

			#tab {
				width: 500px;
				margin: 30px auto;
				border-collapse: collapse;
			}

			th,
			td {
				border: 1px solid #000;
				padding: 5px;
			}

			tbody tr td:first-child {
				text-align: center;
			}

			/*input[type]  属性选择器  选择input标签，并且有type属性input标签*/
			/*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/
			input[type="checkbox"] {
				width: 15px;
				height: 15px;
			}

			#div1 {
				position: relative;
				width: 480px;
				padding: 10px;
				margin: 0 auto;
			}
		</style>
		<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//获取元素
				var $btn1 = $('#form>button');
				var $btn2 = $('#div1>button');
				//添加
				$btn1.click(function() {
					//方法1
					// var $tr = $('<tr>')
					// for(var i=0; i<4 ;i++){
					// 	$tr.append($('<td>'))
					// }
					// // console.log($tr.children()[0])
					// $tr.children('td:nth-child(1)').html('<input type="checkbox">');
					// $tr.children('td:nth-child(2)').text($('#name').val());
					// $tr.children('td:nth-child(3)').text($('#sex').prop('checked') == true ? '男':'女');
					// $tr.children('td:nth-child(4)').text($('#age').val());
					//方法2
					//获取用户输入的内容
					var name = $('#name').val();
					var age = $('#age').val();
					var sex = $('#sex').prop('checked') ? '男' : '女';
					//创建tr标签
					var $tr = $(' <tr><td><input type="checkbox"></td><td>' + name + '</td><td>' + sex + '</td><td>' + age +
						'</td></tr>');

					$('tbody').append($tr);
				});

				//全选 方法1
				// $('#all').click(function() {
				// 	$.each($('tbody input'), function(idx, item) {
				// 		item.checked = $('#all').prop('checked');
				// 	})
				// });

				//全选 方法2
				$('#all').on('click', function() {
					//如果 全选按钮选中  下面的所有复选框都选中 方法1
					// if($(this).prop('checked')){//this是dom元素  不能使用prop方法
					//     $('tbody input').prop('checked',true);
					// }
					// //否则 下面的所有复选框都不选中
					// else{
					//     $('tbody input').prop('checked',false);
					// }

					//直接让下面所有的复选框checked属性值和全选按钮一致 方法2
					$('tbody input').prop('checked', $('#all').prop('checked'));
				})

				//删除 方法1
				// $btn2.click(function() {
				// 	$.each($('tbody input'), function(idx, item) {
				// 		if (item.checked == true) {
				// 			item.parentNode.parentNode.remove();
				// 		}
				// 	})
				// });
				//删除 方法2
				$btn2.on('click', function() {
					//删除选中行
					// if($('tbody :checkbox').prop('checked')){
					//     $('tbody :checkbox').parent().parent().remove();
					// } 隐式迭代出现问题的时候 我们就必须使用jQuery的循环方法来解决问题
					// 方法2
					$('tbody input:checked').parent().parent().remove();
					// 方法3
					// $('tbody').find(':checked').parent().parent().remove();
					// 方法4
					// $('tbody input').each(function(idx,item){
					//     //判断如果 input的checked属性值为true 就删除父元素的父元素
					//     if(item.checked){
					//         $(item).parent().parent().remove();
					//     }
					// })
				})
			})
		</script>
	</head>
	<body>
		<div id="form">
			请输入姓名: <input type="text" id="name"> <br>
			请输入性别: <input type="radio" id="sex" name="sex" checked>男 <input type="radio" name="sex">女<br>
			请输入年龄: <input type="text" id="age">
			<button>添加到表格</button>
		</div>
		<table id="tab">
			<thead>
				<tr>
					<th width="20%"><label><input type="checkbox" id="all">全选</label></th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"></td>
					<td>张三</td>
					<td>女</td>
					<td>88</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>李四</td>
					<td>男</td>
					<td>18</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>王五</td>
					<td>女</td>
					<td>1</td>
				</tr>
			</tbody>
		</table>
		<div id="div1">
			<button>删除所选行</button>
		</div>
	</body>
</html>