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 に答える