0

Web ページに特定の行数のデータのテーブルがあります。各行にあるチェックボックスをクリックして、そのテーブルの複数の行を削除するオプションを提供し、最後に [削除] ボタンをクリックします。各行を削除するには、ユーザーからの特定の入力と、その入力ボックス内の [OK] または [削除] ボタンをクリックする必要があります。私の質問は、ユーザーが現在の入力ボックスで何らかの操作を実行するまで、次の入力ボックスを表示しないようにコードを保持する方法です。モデルボックスは実行を保持しないため、役に立たないようです。

特定のイベントが発生するまでJavaScriptを待機させる方法の重複の可能性

戻る前にイベントを待機する関数を作成する

答えがノーの場合は不可能です。では、そのような GUI シナリオをどのように解決しますか。

4

2 に答える 2

0

カスタムモーダルのボタンクリックは、行のボタンクリックではなく、実際に処理を行う必要があります。

行のボタンをクリックすると、削除するデータを含むフィールドが設定されます。ダイアログのボタンは、最初に行に対して行った処理を実行します。

他のオプションは使用することですreturn window.confirm("Are you sure?");

于 2013-02-06T15:14:03.477 に答える
0
  1. 選択した行の ID を配列に追加します。
  2. [削除] ボタンをクリックすると、最初に選択した行 (配列の最初の項目) のカスタム確認ダイアログを表示する関数が呼び出されます。
  3. アラートのいずれかのボタンをクリックすると、本来の動作が実行され、
    • ダイアログを閉じます
    • 最後の要素まで、配列内の次の項目に対して 2 番目と 3 番目のステップを実行します。

基本的な例を次に示します。

Javascript

<script>
var itemsToDelete = new Array;
function updateItemsToDelete( row ) {
    var getIndex = itemsToDelete.indexOf( row.id );
    if ( getIndex == -1 ) {
        itemsToDelete.push( row.id );
    } else {
        itemsToDelete.splice( getIndex, 1 );
    }
}


function removeRow( rowID ) {
    var toDelete = document.getElementById( rowID );
    toDelete.parentNode.removeChild( toDelete );
    itemsToDelete.shift();
    requestConfirmation();
}
function nextPlease() {
    itemsToDelete.shift();
    requestConfirmation();  
}

function requestConfirmation() {
    if ( itemsToDelete.length == 0 ) {
        document.getElementById( "box" ).style.display = "none";
        return;
    }

    document.getElementById( "box" ).style.display = "block";
    document.getElementById( "message" ).innerHTML = "Remove " + itemsToDelete[0] + "?";
    document.getElementById( "yes_button" ).onclick = function() { removeRow( itemsToDelete[0] ); };
    document.getElementById( "no_button" ).onclick = nextPlease;
}
</script>

HTML

<div id="box" style="display:none;">
    <span id="message"></span>
    <input type="button" id="yes_button" value="yes" />
    <input type="button" id="no_button" value="no" />
</div>
<table>
    <tr id="row1">
        <td>
            <input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" />
        </td>
        <td>row 1</td>
    </tr>
    <tr id="row2">
        <td>
            <input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" />
        </td>
        <td>row 2</td>
    </tr>
    <tr id="row3">
        <td>
            <input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" />
        </td>
        <td>row 3</td>
    </tr>
    <!-- and so on... -->
</table>
<input type="button" onclick="requestConfirmation();" value="delete selected" />
于 2013-02-06T15:39:06.613 に答える