Visualizzazione risultati 1 fino 3 di 3

Discussione: Delete Row da Tabella

  1. #1
    phollia non è connesso Utente giovane
    Data registrazione
    05-02-2015
    Messaggi
    38

    Predefinito Delete Row da Tabella

    Buongiorno

    dunque, ho una tabella e mi occorre poter eliminare le righe selezionate tramite checkbox utilizzando solo Javascript nativo (no jQuery).

    La tabella è semplicissima (in produzione sarà generata dinamicamente)

    Codice HTML:
    <table id="elenco" name="elenco">
      <thead>
        <tr>
          <th><input type="checkbox" disabled /></th>
          <th>Nome</th>
        </tr>
      </thead>
      
      <tbody>
        <tr id="u_1">
          <td><input type="checkbox" name="sel" value="1" /></td>
          <td>A</td>
        </tr>
        <tr id="u_2">
          <td><input type="checkbox" name="sel" value="2" /></td>
          <td>B</td>
        </tr>
        <tr id="u_3">
          <td><input type="checkbox" name="sel" value="3" /></td>
          <td>C</td>
        </tr>
        <tr id="u_4">
          <td><input type="checkbox" name="sel" value="4" /></td>
          <td>D</td>
        </tr>
      </tbody>
    </table>
    provo a cancellare delle righe ma:
    - se cancella una sola riga, tutto OK
    - se cancello due righe NON contigue tutto OK (tipo A e C, B e D)
    - se cancello due o + righe la seconda selezionata non viene eliminata e rimane selezionata
    (se provo a cancellare A e B, A viene eliminata mentre B rimane (selezionata) così come con B e C, C rimane, ecc. ma anche se provo con A, B e C, A e C vengono eliminate mentre B rimane)
    Anche se seleziono tutte e 4 le righe, A e C eliminate, B e D rimaste.

    Il codice JS è

    Codice:
    var els = document.getElementsByTagName('input');
    				
    for( i = 0; i < els.length; i++){
      if( els[i].getAttribute('type') == 'checkbox' && els[i].checked ) {
        var k = els[i].value;
    			
        document.getElementById('u_' + k).remove();
      }
    }
    Perchè questo strano comportamento?
    Dove sbaglio?

    Una pagina di test per vedere il tutto in azione è disponibile qui.

    Grazie a chi potrà svelarmi questo mistero.

  2. #2
    phollia non è connesso Utente giovane
    Data registrazione
    05-02-2015
    Messaggi
    38

    Predefinito

    Ho tamponato cambiando il codice JS così:

    Codice:
    var temp = new Array();
    
    var els = document.getElementsByTagName('input');
    				
    for( i = 0; i < els.length; i++){
      if( els[i].getAttribute('type') == 'checkbox' && els[i].checked ) {
        var k = els[i].value;
    
        temp[temp.length] = k;
    					}
    }
    				
    for( i = 0; i < temp.length; i++){
      document.getElementById('u_' + temp[i]).remove();
    }
    				
    temp = [];
    In sostanza prima memorizzo in un array gli da rimuovere e poi, con un secondo ciclo, rimuovo le righe.


    La cosa sembra funzionare (qui risultato), ma rimane il dubbio sul perchè in un solo passaggio non funziona

  3. #3
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    5,906

    Predefinito

    Quando chiami getElementsByTagName, la funzione ti restituisce una HTMLCollection collegata al contenuto della pagina: quando cancelli un elemento, questo sparisce anche dalla collezione, aggiornando gli indici degli elementi che seguono. Quindi se cancelli un elemento in un normale ciclo, finisci per ignorare quello successivo.

    Una soluzione è raccogliere gli elementi da cancellare in un altro array (quella che hai trovato tu), oppure eseguire le cancellazioni all'indietro, partendo dalla fine dell'array.

    Vedi: https://developer.mozilla.org/en-US/...mentsByTagName
    chezDreadnaut
    "Un <BR/> è impuro, punto."
    "I <P>&nbsp;</P> non hanno diritto di esistere."

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •