jQuery - 添加/删除表格行

从我在右侧的选择中，我动态构建（克隆）一组行到左侧。在那里我还添加了一个REMOVE按钮。我无法从该按钮调用jQuery函数。同样，在点击REMOVE按钮后，我怎样才能将右边各行的复选框设置为其先前的状态（选中）。下面是所有的代码。谢谢。jQuery - 添加/删除表格行

例 </SCRIPT>

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#row_remove").click(function() {  
    alert("1"); 
    }); 

$('#tb11 tr') 
.filter(':has(:checkbox:checked)') 
.addClass('selected') 
.end() 
    .click(function(event) { 
    //alert("1"); 

    $(this).toggleClass('selected'); 

     if (event.target.type !== 'checkbox') { 

      $(':checkbox', this).attr('checked', function() { 

       if ($(this).is(":checked")) 
       { 
        $(this).closest("tr").clone().appendTo("#tbl2").append("<label><input type='text' name='textfield' id='textfield'/></label><button id='row_remove'>remove</button>"); 

        //ac 1 
        var findCheckBox = $("#tbl2 input:checkbox.chkclass"); 
        findCheckBox.remove(); 

       } 
       else 
       { 
        var index = $(this).closest("tr").attr("id"); 
        var findRow = $("#tbl2 tr[id='" + index + "']"); 
        findRow.remove(); 
       } 

      return !this.checked; 

      }); 
     } 
    }); 

}); 
</script> 

<style type="text/css"> 

table { 
    text-align: center; 
} 
.right { 
    text-align: left; 
} 
.right { 
    text-align: left; 
} 

    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

</style> 
</head> 

<body> 
<table width="100%" border="0" cellpadding="4"> 
    <tr> 
    <td width="32%" rowspan="3" valign="top" bgcolor="#EAEAEA"> 

    <table width="100%" border="0"> 

     <tr id="tbl2" width="100%"> 
     <!-- <td height="101" valign="top" bgcolor="#FFFFFF" class="right">&nbsp;</td>--> 
     </tr> 
    </table></td> 
    <td width="1%" bgcolor="#EAEAEA">&nbsp;</td> 
    <td width="67%" colspan="3" rowspan="3" valign="top" bgcolor="#EAEAEA"> 

    <table id="tb11" width="100%" border="0"> 
    <tbody> 
     <tr id="1"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" valign="top" bgcolor="#FFFFFF" class="right">item 1</td> 
     </tr> 
     <tr id="2"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 2</td> 
     </tr> 
     <tr id="3"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 3</td> 
     </tr> 
     <tr id="4"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 4</td> 
     </tr> 
     <tr id="5"> 
     <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox" class="chkclass" value="yes" checked="checked" /></td> 
     <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 5</td> 
     </tr> 
     </tbody> 
    </table> 

    </td> 
    </tr> 
    <tr> 
    <td bgcolor="#EAEAEA">&nbsp;</td> 
    </tr> 
    <tr> 
    <td bgcolor="#EAEAEA">&nbsp;</td> 
    </tr> 
</table> 

</body> 
</html>

来源

2010-06-30 andreas777

元素ID属性值必须是唯一的!!!永远记住这一点！

检出clone()文档。此方法具有可选参数“withDataAndEvents”，默认为false。

来源

2010-06-30 08:54:12 Anpher

jQuery - 添加/删除表格行

回答

相关问题