<link rel="stylesheet" href="checkDemo.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script>
jQuery(function () {
//需求1：点击按钮显示遮罩层和添加数据表格
//需求2：点击里面的关闭按钮隐藏遮罩层和添加数据表格
//需求3：点击get所在的标签，删除所在的tr
//需求4：点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中
//需求1：点击按钮显示遮罩层和添加数据表格
$("#j_btnAddData").click(function () {
//显示遮罩层和j_formAdd这个盒子
$("#j_mask").show();
$("#j_formAdd").show();
});
//需求2：点击里面的关闭按钮隐藏遮罩层和添加数据表格
$("#j_hideFormAdd").click(function () {
//显示遮罩层和j_formAdd这个盒子
$("#j_mask").hide();
$("#j_formAdd").hide();
});
//需求3：点击get所在的标签，删除所在的tr
$("a.get").click(function () {
//删除的是所在的tr。
$(this).parent("td").parent("tr").remove();
});
//需求4：点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中
$("#j_btnAdd").click(function () {
//bug1： 内容不能为空
if($("#j_txtLesson").val() === ""){
alert("内容不能为空！");
return;
}
//全部能容这个成tr嵌套td的形式添加到tbody中
//获取tr，然后为tr赋值。
var tr = $("<tr></tr>");
//赋值
tr.html('<td>'+$("#j_txtLesson").val()+'</td><td>'+$("#j_txtBelSch").val()+'</td><td><a href="javascrip:;" class="get">GET</a></td>');
//在房间tbody中
$("#j_tb").append(tr);
//bug3：新产生的tr没有时间绑定
tr.find("a").click(function () {
//删除的是所在的tr。
tr.remove();
});
//问题代码
// var str = $("#j_tb").html();
// str += "<tr><td>111</td></tr>";
// console.log(str);
// $("#j_tb").html(str);
// console.log($("#j_tb").html())
//显示遮罩层和j_formAdd这个盒子
$("#j_mask").hide();
$("#j_formAdd").hide();
//bug2:设置完毕，清空内容
$("#j_txtLesson").val("");
});
});
</script>
</head>
<body>
<div class="wrap">
<div>
<input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
</div>
<table>
<thead>
<tr>
<!-- <th><input type="checkbox" id="j_cbAll" /></th> -->
<th>课程名称</th>
<th>所属学院</th>
<th>已学会</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>JavaScript</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>css</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>html</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>jQuery</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
</tbody>
</table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
<div class="form-add-title">
<span>添加数据</span>
<div id="j_hideFormAdd">x</div>
</div>
<div class="form-item">
<label class="lb" for="j_txtLesson">课程名称：</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
</div>
<div class="form-item">
<label class="lb" for="j_txtBelSch">所属学院：</label>
<input class="txt" type="text" id="j_txtBelSch" value="传智播客-前端与移动开发学院">
</div>
<div class="form-submit">
<input type="button" value="添加" id="j_btnAdd">
</div>
</div>
</body>
网友评论