求一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>希望 实现这样的效果：
点击红色，下面的表格增加一行，内容如：红色         一个文本框点击黑色，再增加一行，
黑色        一个文本框如果我再把复选框为红色的勾选去掉。那么，下面表格中就会相应的删除刚才新增加红色的那一行

解决方案 »

  1.   


    <!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>不知道能不能满足LZ的要求