2

行のクローンを作成して、テーブルに行を動的に追加しています。1 つのセルに入力要素があります。行が複製されると、入力要素の ID 値が一意に変更されますが、すべての入力は同じクラスになります。jQueryモーダルダイアログ（）を開く入力要素に割り当てられたクラスに割り当てられたクリック機能があります。dialog() には、ユーザーがコメントを入力するテキストエリアがあります。
ユーザーがdialog()で「Accept」をクリックすると、ダイアログのtextarea要素の値が、クリックされたinput要素の値に書き込まれます。

これは、最初の元の入力要素をクリックした場合にのみ機能します。行を追加して入力要素をクリックすると、dialog() が開きますが、入力要素は更新されません。

奇妙な動作が 1 つ発生します... [行の追加] ボタンを使用して行を追加した後、元の行の入力要素を変更すると、すべての入力要素がそのテキストに変更されます。(注: datepicker コードは含めませんでした)

IE7 に対応している必要があります。（私はそれが古いことを知っています！）

次の jquery スクリプトを使用しています: (jquery-1.8.2.js) および (jquery-ui-1.9.1.custom.min.js)

簡略化された HTML は次のとおりです。

<form id="frmTask">
<div id="popupDialog" title="Enter your comments for this IDPM Task here.">
    <p>
<div>characters left: <span id="txt-length-left"></span></div>
<textarea cols="50" rows="30" name="CommentsDialog" id="CommentsDialog" class="txtComments"></textarea>
</p>
</div>
<table style="" id="tblInput" border="0" name="tblInput" cellspacing="0" cellpadding="0" width="600" summary="Formatting table for output display">
<thead>
<tr>
<th scope="col"><div width="24px">&nbsp;</div></th>
<th scope="col">Suspense Date</th>
<th scope="col">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tdTop">&nbsp;</td>
<td class="tdTop"><input name="SuspenseDate1" id="SuspenseDate1" value="" class="DatePick" /></td>
<td class="tdTop"><input cols="25" rows="1" name="Comments1" id="Comments1" class="popComments"></input></td>
</tr>
</tbody>
</table>
<button id="AddNew">Add Row</button>
</form>

コードは次のとおりです。

 // Copy/Clone the last row and append it to the TABLE ID referenced in the function call
    $("#AddNew").click(function() {
    addTableRow("#tblInput");
    }); 

    function addTableRow(table) {
                                                //$('input.DatePick').removeClass('hasDatepicker').datepicker();
    var tbody = $(table + ' tbody');
    var rows = tbody.find('tr').length;
    var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
    newRow.find(':input').val('').each(function() {
    var id = this.id
    if (id) {
    this.id = this.id.split('_')[0] + '_' + rows;
    }
    }).end().find('.DatePick').removeClass('hasDatepicker').datepicker();
    // set variable to the last row in the table    
    newRow = $(table + ' tr:last');
    // Remove the delete icon from the previous row before creating the new row.
    $('a.remove').remove();
    // insert a remove link in the last cell
    $('td:first-child', newRow).html('<a href="" class="remove" alt="Delete This Row" title="Delete This Row"><img src="/images/Delete_Icon_48x48.jpg" height="24px" width="24px" border="0"><\/a>');
    var addRow = $(this).parent().parent();
    return true;
    }

モーダル ダイアログ コードは次のとおりです。

    var inputID;
    $('.popComments').on('click', function(event) {
    inputID = event.target.id;
    alert(event.target.id + ' <- event.target.id : inputID -> ' + inputID);          
    $("#popupDialog").data("id", inputID);
    var $stuff = "Comments1";
    $('#popupDialog').dialog('open');
    $('textarea.txtComments').text("");
    });          
    // This is the popUp dialog for entering user Comments
    $("#popupDialog").dialog({
    modal: true,
    autoOpen: false,
    width:"600",
    position:{ my: "top", at: "top", of: "#Comments1" },
    buttons: {
    'Cancel': function() {
    $(this).dialog('close');
    },
    'Accept': function() {
    var helpMe  = $("#popupDialog").data("id");
    var txtComments = $(this).find('textarea.txtComments').val();
    $('#frmTask input#' + helpMe).val(txtComments);
    $(this).dialog('close');
    }
    }
    });
4

1 に答える 1

0

マニック、ここでいくつかの不必要なフープを飛び越えていると思います。

  • id は避けてください - 複雑なイベント処理が関係している場合でも、テーブルの行を複製する場合、id は一般的に不要です。
  • 元のプロトタイプの行に削除ボタンをハード コードdisplay:noneし、スタイル シートでスタイルを設定します。

次に、JavaScript は次のように簡略化されます。

$("#AddNew").on('click', function() {
    var tbody = $('#tblInput tbody');
    var newRow = tbody.find('tr').eq(0).clone(true).appendTo(tbody);
    newRow.find('input').val('').end().find('.DatePick').removeClass('hasDatepicker').datepicker();
    tbody.find('a.remove').hide().filter(":last").show();
});

入力 ID なしで動作するようにダイアログ コードを変更する必要がありますが、それは問題にはなりません。ダイアログが開いたときに、テキストを正しい場所に戻すことができるように、javascript で「アクティブな」入力要素への参照を保持する必要があります。これは実際には、id を覚えてから、それを使用して DOM 内の正しい入力要素を再検出するよりも単純で経済的です (これはおそらく現在行っていることです)。

それでもダイアログなどに問題がある場合は、質問を編集してコードを含めてください。確認します。

編集：

入力フィールド ID の必要性を回避して、コメントを処理するためのコードを次に示します。

var $$ = {}; //cache of reusable jQuery objects
$$.popComments = $('.popComments');
$$.popupDialog = $('#popupDialog');
$$.popupComments = $popupDialog.find('textarea.txtComments');
$$.activeInput = null;

$$.popComments.on('click', function() {
    $$.activeInput = $(this);
    $$.popupComments.empty();
    $$.popupDialog.dialog('open');
});
// This is the popUp dialog for entering user Comments
$$.popupDialog.dialog({
    modal: true,
    autoOpen: false,
    width: "600",
    position:{ my: "top", at: "top", of: "#Comments1" },
    buttons: {
        'Cancel': function() {
            $(this).dialog('close');
        },
        'Accept': function() {
            $$.activeInput.val( $$.popupComments.val() );
            $(this).dialog('close');
        }
    }
});

ノート：

  • テストされていません。
  • 処理が必要になるたびに DOM 内の要素を再検出しない方が、処理能力を節約できます。ここでキャッシュが役立ち、独自の内部名前空間として機能する$$ことで、メインの名前空間が詰まるのを防ぎます。$.function(){...}
  • おそらくダイアログはすでに機能しているので、オプションをチェックしていません.dialog()（「同意」機能以外）。
于 2012-11-26T00:27:51.493 に答える