<!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;
<!-- for(var i = 1; i < tabRowLen; i++ ) { -->
<!-- var row = $("#table").find("tr").eq(i) -->
<!-- var temp = row.find("td").eq(0); -->
<!-- if(temp.find('input').prop('checked')) { -->
<!-- row.remove(); -->
<!-- } -->
<!-- } -->
$('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><!--//如果此处value为1和2获取的值总是为1和2,获取不到文本 -->
<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 >
<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;
<!-- for(var i = 1; i < tabRowLen; i++ ) { -->
<!-- var row = $("#table").find("tr").eq(i) -->
<!-- var temp = row.find("td").eq(0); -->
<!-- if(temp.find('input').prop('checked')) { -->
<!-- row.remove(); -->
<!-- } -->
<!-- } -->
$('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><!--//如果此处value为1和2获取的值总是为1和2,获取不到文本 -->
<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,网上去看别人的例子.