jquery 对form表单的动态操作

最新推荐文章于 2022-02-25 17:08:18 发布

wwwffy

最新推荐文章于 2022-02-25 17:08:18 发布

阅读量845

点赞数

本文链接：https://blog.csdn.net/wwwffy/article/details/69829169

版权

<!doctype html>
<html >
<head>
<title>表单练习3</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#b_add').click(function(){
var fullname = $("input[id='fullname']").val();
var sex = $("input[type='radio']:checked").val();
var dept = $('#dept option:selected').html();
if(fullname ==''){
alert('姓名不能为空');
return;
}
if(fullname.length > 10){
alert('姓名不能超过10个字符');
return;
}

//var id = jQuery("table").find("tr").length +1
var trHTML = '<tr>'+
'<td><input type="checkbox" id="check"/></td>'+
'<td>'+fullname+'</td>'+
'<td>'+sex+'</td>'+
'<td>'+dept+'</td>'+
'</tr>';
$("#list").append(trHTML);
});

$('#b_del').click(function(){
//var tabRowLen = $("table tbody tr").length;








$('table tr td input:checked').each(function(){
n = $(this).parents("tr").index();
$("#list").find("tr:eq("+n+")").remove();
});
});
});
</script>
</head>

<body>
<p>
<label for="fullname">姓名：</label>
<input type="text" id="fullname" />
</p>
<p>

<label>性别：</label>
<input type="radio" name="sex" id="sex_1" value="男" /><label for="sex_1">男</label>
<input type="radio" name="sex" id="sex_2" value="女" /><label for="sex_2">女</label>
</p>
<p>
<label for="dept">部门：</label>
<select id="dept">
<option value="A">应用服务部</option>
<option value="B">平台支持部</option>
<option value="C">解决方案部</option>
</select>
</p>

<table id="list" border="1">
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>部门</th>
</tr>
</table>

<button id="b_add" type="button">添加</button>
<button id="b_del" type="button">删除</button>
</body>

</html>

作为一个新手开始不知道如何操作,对应的函数也不知道,只能去查api,网上去看别人的例子.

wwwffy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 对form表单的动态操作

表单练习3$(document).ready(function(){$('#b_add').click(function(){var fullname = $("input[id='fullname']").val();var sex = $("input[type='radio']:checked").val();var dept = $('#dept option:
复制链接

扫一扫