Question

我的网页中有一个包含特定行数的数据表。我通过单击每行上的复选框，然后单击“删除”按钮，可以选择删除该表中的多行。删除每一行需要用户的某些输入，并单击该输入框内的OK或Delete按钮。现在我的问题是如何保持代码不显示下一个输入框，直到用户在当前的一个操作中执行某些操作。像警告框一样的东西。模型框似乎没有帮助，因为它们没有执行。

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

making a function to wait an event before returning

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

Answer 1

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

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

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

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

模仿警报框行为

2 个答案: