效果图
点击添加即出现新的一行空白数据,并赋值id;删除是根据checkbox选中一个或多个删除;
废话不多说,直接上代码,相信大家可以看懂;
html部分
<div class="zl-sqrxx-con">
<table id="addCourse">
<tr>
<td>课题名称</td>
<td>课题编号</td>
<td>课题负责人</td>
</tr>
</table>
<div class="btn-l">
<a href="javascript:void(0);" class='submit-btn' onclick="addCourse()">添加关联课题</a>
<a href="javascript:void(0);" class='back-btn' onclick="deleteCourse()">删除关联课题</a>
</div>
</div>
js部分
<script>
var y = 0;
function addCourse(){
y++;
var result ="";
var str = "str"+y
var courseName ="courseName"+y
var courseNum = "courseNum"+y
var courseUser = "courseUser"+y
result += "<tr class="+str+"><td><input type='checkbox' name='check' value="+str+"><input type='text' id="+courseName+"></td>";
result +="<td><input type='text' id="+courseNum+"></td><td><input type='text' id="+courseUser+"></td></tr>"
$("#addCourse").append(result);
}
function deleteCourse(){
var checks=$("input[name='check']");
for(var y=0;y<checks.length;y++){
if(checks[y].checked){
var a = checks[y].value;
$("."+a).remove();
}
}
}
</script>
以上就是实现整个增加与删除的代码。如果有什么问题欢迎指出与讨论;