求一JQUERY效果，根据复选框勾选，增加和减少表格行数
<input type="checkbox" name="prose" id="prose" value="红色">红色
<input type="checkbox" name="prose" id="prose" value="黑色">黑色
<input type="checkbox" name="prose" id="prose" value="棕色">棕色
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="stab">
<tr>
<td align="right">颜色</td>
<td>说明</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("input[name='prose']").click(function () {
if ($(this).attr("checked")) {
//如果是选中
var html = gethtml($(this).val());
$(".stab").append(gethtml($(this).val()));
} else {
//如果是取消选中
$("." + $(this).val()).remove();
}
})
function gethtml(color)
{
var html = "<tr class='"+color+"'>" +
"<td>"+color+"</td>" +
"<td><input type='text' /></td>" +
"</tr>";
return html;
}
})
</script>
</head>
<body>
<input type="checkbox" name="prose" value="red">红色
<input type="checkbox" name="prose" value="black">黑色
<input type="checkbox" name="prose" value="brown">棕色
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="stab">
<tr>
<td align="right">颜色</td>
<td>说明</td>
</tr>
</table>
</body>
</html>
