0

最后修改代码

我对 jquery 很陌生，即使我喜欢它，我仍然需要学习很多东西......如果用户连续单击现有单元格中的一个，下面的代码将追加一个新行。那部分工作正常。我试图弄清楚如何在每行的末尾也有一个 [-] 按钮，用户可以单击该按钮以删除该行以防万一他们犯了错误？这甚至可能吗？

这是jquery

$( function(){
        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    newInput.id="newId";
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
            }
        });
});

这是标记

<table width="100%" cellpadding="0" cellspacing="0" id="knotes">
<thead bgcolor="#f7f9c9">
    <td align="center"><label for="name">Name</label></td>
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td>

    <td>&nbsp;</td>
    <td align="center"><label for="kbreak">Bk?</label></td>
    <td>&nbsp;</td>
    <td align="center"><label for="kshift">Shift</label></td>
    <td>&nbsp;</td>
</thead>

<tr>
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]" /></td>

    <td align="center"><input type="text" name="klabor[kot][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kdt][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kbreak][]"  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kshift][]"  /></td>

</tr>
</table>

这是修改后的代码 修改后的 jQuery

$( function(){
        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    newInput.id="newId";
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
                    $('minus').live(function(){$(this).closest('tr').remove();});
            }
        });
});

修改后的标记

<table width="100%" cellpadding="0" cellspacing="0" id="knotes">
<thead bgcolor="#f7f9c9">
    <td align="center"><label for="name">Name</label></td>
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td>
    <td>&nbsp;</td>
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td>

    <td>&nbsp;</td>
    <td align="center"><label for="kbreak">Bk?</label></td>
    <td>&nbsp;</td>
    <td align="center"><label for="kshift">Shift</label></td>
    <td>&nbsp;</td>
</thead>

<tr>
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]"  /></td>

    <td align="center"><input type="text" name="klabor[kot][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kdt][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kbreak][]" value=""  /></td>
    <td>&nbsp;</td>
    <td align="center"><input type="text" name="klabor[kshift][]" value="" /></td><td class="minus"><img src="/images/minus.png" /></td>

</tr>
</table>
4

2 回答 2

1

是的：

$('button').live(function(){$(this).closest('tr').remove();});

其中 'button' 是代表您的 [-] 按钮的选择器。

此外，可以进行一些更改以优化您的代码（并使其更加跨浏览器兼容）：

if( row.className.indexOf("clicked")==-1 )
row.className+="clicked";
newInput.id="newId";

应该变成：

if (row.hasClass('clicked'))
row.addClass('clicked');
newInput.attr('id','newId');
于 2009-10-09T14:02:21.507 回答
1

您可以使用 jQuerylive方法。

$(".removeMe").live('click',function(){ 
  $(this).closest('tr').remove();
}

现在，当您添加或克隆 jQuery 之类的 html 代码时，<a class='removeMe'>(-) Remove</a>将为它设置一个 onclick 事件。

编辑：

$( function(){

        $('.minus').live(function(){$(this).closest('tr').remove();});

        $("#knotes > tbody > tr > td > input").bind('focus', function(){
            var row = $(this).closest("tr").get(0);
            if( row.className.indexOf("clicked")==-1 )
            {       
                    var rowCopy=$(row).clone(true);
                    $(row).closest("tbody").append(rowCopy);
                    row.className+="clicked";
                    var newInput=$("input",rowCopy).get(0);
                    $(newInput).bind('focus',attachAutoCompleteEmployeeValues);
            }
        });
});
于 2009-10-09T14:05:16.410 回答