求1JQUERY效果，根据复选框勾选，增加和减少表格行数
日期：2014-05-17 浏览次数：20535 次
求一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>";
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
