模仿警报框行为答案

【问题标题】：mimic alert box behaviour模仿警报框行为
【发布时间】：2013-02-06 15:12:48
【问题描述】：

我的网页中有一个包含一定行数的数据表。我提供了一个选项来删除该表中的多行，方法是单击每行上的复选框，最后单击“删除”按钮。删除每一行需要用户的某些输入，然后单击该输入框中的“确定”或“删除”按钮。现在我的问题是如何保持代码不显示下一个输入框，直到用户在当前输入框中执行某些操作。一些像警报框之类的东西。模型框似乎没有帮助，因为它们不持有执行。

可能重复 how to let javascript wait until certain event happens

making a function to wait an event before returning

如果答案不是不可能。那么你如何解决这种GUI场景。

【问题讨论】：

标签： javascript

【解决方案1】：

单击自定义模式的按钮实际上应该进行处理，而不是单击该行的按钮。

单击该行的按钮应设置一个包含您要删除的数据的字段。对话框中的按钮执行您最初对行所做的操作。

其他选项是使用return window.confirm("Are you sure?");

【讨论】：

【解决方案2】：

将选定行的 ID 添加到数组中。
单击“删除”按钮会调用一个函数，该函数会针对第一个选定行（数组中的第一项）显示自定义确认对话框。
单击警报中的任何按钮都会执行应执行的操作，并且
- 关闭对话框
- 对数组中的下一项执行第二步和第三步，直到最后一个元素。

这是一个基本的例子：

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" />

【讨论】：