Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ol> <li>Add IDs of selected rows to an array.</li> <li>Clicking a Delete button calls a function that displays your custom confirmation dialog for the first selected row (first item in the array).</li> <li>Clicking any of the buttons in your alert does what it is supposed to do and <ul> <li>closes the dialog</li> <li>executes the second and third step for the next item in the array until the last element.</li> </ul></li> </ol> <p>Here's a basic example:</p> <p><strong>Javascript</strong></p> <pre><code>&lt;script&gt; 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; } &lt;/script&gt; </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div id="box" style="display:none;"&gt; &lt;span id="message"&gt;&lt;/span&gt; &lt;input type="button" id="yes_button" value="yes" /&gt; &lt;input type="button" id="no_button" value="no" /&gt; &lt;/div&gt; &lt;table&gt; &lt;tr id="row1"&gt; &lt;td&gt; &lt;input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" /&gt; &lt;/td&gt; &lt;td&gt;row 1&lt;/td&gt; &lt;/tr&gt; &lt;tr id="row2"&gt; &lt;td&gt; &lt;input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" /&gt; &lt;/td&gt; &lt;td&gt;row 2&lt;/td&gt; &lt;/tr&gt; &lt;tr id="row3"&gt; &lt;td&gt; &lt;input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" /&gt; &lt;/td&gt; &lt;td&gt;row 3&lt;/td&gt; &lt;/tr&gt; &lt;!-- and so on... --&gt; &lt;/table&gt; &lt;input type="button" onclick="requestConfirmation();" value="delete selected" /&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload