jQuery-添加/删除表行
从右侧的选择中，我动态地构建（克隆）左侧的一组行。在那里我还添加了一个删除按钮。我无法从该按钮调用jQuery函数。此外，单击“删除”按钮后，如何将右侧各行的复选框设置为其先前状态（选中）。下面是所有代码。 多谢各位 例子jQuery-添加/删除表行,jquery,html,row,tablerow,Jquery,Html,Row,Tablerow,从右侧的选择中，我动态地构建（克隆）左侧的一组行。在那里我还添加了一个删除按钮。我无法从该按钮调用jQuery函数。此外，单击“删除”按钮后，如何将右侧各行的复选框设置为其先前状态（选中）。下面是所有代码。 多谢各位 例子 $（文档）.ready（函数（）{ $（“#行_删除”）。单击（函数（）{ 警报（“1”）； }); $（'tb11 tr'） .filter（':has（：复选框：选中）'）） .addClass（'已选择'） (完) 。单击（功能（事件）{ //警报（“1”）； $
$（文档）.ready（函数（）{
$（“#行_删除”）。单击（函数（）{
警报（“1”）；
});
$（'tb11 tr'）
.filter（':has（：复选框：选中）'））
.addClass（'已选择'）
(完)
。单击（功能（事件）{
//警报（“1”）；
$（this.toggleClass（'selected'）；
如果（event.target.type！==“复选框”）{
$（'：checkbox'，this.attr（'checked'，function（））{
如果（$（this）.is（“：checked”））
{
$（this）.clone（）.appendTo（#tbl2”）.append（“remove”）；
//ac 1
var findCheckBox=$（“#tbl2输入：checkbox.chkclass”）；
findCheckBox.remove（）；
}
其他的
{
var指数=$（此）.tr.attr（“id”）；
var findRow=$（“#tbl2 tr[id='”+index+']）；
findRow.remove（）；
}
返回！这个。检查；
});
}
});
});
桌子{
文本对齐：居中；
}
.对{
文本对齐：左对齐；
}
.对{
文本对齐：左对齐；
}
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
项目1
项目2
项目3
项目4
项目5
查看文档。此方法具有可选参数“withDataAndEvents”，默认为false。元素ID属性值必须唯一！！！永远记住这一点 查看文档。此方法具有可选参数“withDataAndEvents”，默认为false
<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"> </td>-->
</tr>
</table></td>
<td width="1%" bgcolor="#EAEAEA"> </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"> </td>
</tr>
<tr>
<td bgcolor="#EAEAEA"> </td>
</tr>
</table>
</body>
</html>