Javascript 模拟报警箱行为

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

可能重复的

---

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

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

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

另一个选项是使用

返回窗口。确认（“您确定吗？”）

将选定行的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>


var itemsToDelete=新数组；
函数updateItemsToDelete（行）{
var getIndex=itemsToDelete.indexOf（row.id）；
如果（getIndex=-1）{
itemsToDelete.push（row.id）；
}否则{
itemsToDelete.splice（getIndex，1）；
}
}
函数删除程序（rowID）{
var toDelete=document.getElementById（rowID）；
todelite.parentNode.removeChild（toDelete）；
itemsToDelete.shift（）；
请求确认（）；
}
函数nextPlease（）{
itemsToDelete.shift（）；
请求确认（）；
}
函数requestConfirmation（）{
if（itemsToDelete.length==0）{
document.getElementById（“box”）.style.display=“无”；
返回；
}
document.getElementById（“box”）.style.display=“block”；
document.getElementById（“message”）.innerHTML=“Remove”+itemsToDelete[0]+”；
document.getElementById（“yes_按钮”）.onclick=function（）{removeRow（itemsToDelete[0]）；}；
document.getElementById（“no_按钮”）.onclick=nextPlease；
}

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


第1行
第2排
第3排