JavaScript e HTML – Modifica di sottoclassi create dynamicmente all’interno di una class creata dynamicmente

Problema:

Ho una tabella HTML creata dynamicmente, che viene utilizzata per compilare i fogli di tempo. È creato a livello di codice – non esiste un controllo formale. Il design è un mix di CSS con caselle di testo create tramite JavaScript. Ora ogni ‘riga’ di questa tabella si trova in una class chiamata ‘divRow’, ed è separata dalle altre avendo ‘r’ e il numero della riga assegnata come class (es. ‘DivRow r1’, ‘divRow r2 ‘, eccetera.).

All’interno di ognuna di queste ‘divRow’s, ho delle celle in una class chiamata’ divCell cc ‘. Questi non hanno identificatori nel nome della class. All’ultima cella, ho una colonna ‘Totale’, che calcola idealmente il totale della riga e poi la aggiunge in una casella di testo creata dynamicmente.

Quello che ho al momento:

// Function to create textboxes on each of the table cells. $(document).on("click", ".cc", function(){ var c = this; if(($(c).children().length) === 0) { var cellval = ""; if ($(c).text()) { cellval = $(this).text(); if(cellval.length === 0) { cellval = $(this).find('.tbltxt').val(); } } var twidth = $(c).width() + 21; var tid= 't' + c.id; if(tid.indexOf('x17') >= 0){ var thtml = ""; eval(spproc(spcol(t[getx(c.id)],thtml,tid,twidth))); //var getRow = $(this).parent().attr('class'); - this gets the 'divRow r#' that it is currently on. var arr = document.getElementsByClassName('cc'); var tot = 0; for(var i = 0; i 0){ tot += parseInt(arr[i].innerHTML);} } $('#t' + c.id).focus(); $(this).children().val(tot); }else{ var thtml = ""; eval(spproc(spcol(t[getx(c.id)],thtml,tid,twidth))); $('#t' + c.id).focus(); $('#t' + c.id).val(cellval); }} }); 

Come puoi vedere, quando l’utente fa clic su ‘divCell cc’, crea una casella di testo se non è presente. Se l’utente fa clic sulla diciassettesima colonna (‘x17’), esegue il ciclo for e assegna il valore del totale alla casella di testo.

    Quello che devo succedere:

    Quindi, ciò che accade ora è che l’ultima cella sum il totale di ogni cella che ha un valore. Tuttavia, non sono dipendenti dalla riga. Mi serve per calcolare in base alla riga che è attualmente ‘on’. Quindi, se sto calcolando la seconda riga, non voglio che la sum del primo, del secondo e del terzo sia inserita nel totale, voglio solo sumre i valori delle 2a riga.

    Quello che ho provato:

    Ho provato a ripetere e usare il numero ‘divRow r #’ per cercare di ottenere gli elementi dell’array che terminano con quel numero. (alle celle viene assegnato un ID di ‘x # y #’ e alle caselle di testo assegnate a quelle celle viene assegnato un ID di ‘tx # y #’).

    Ho provato a ottenere elementi dal nome della class della cella, e poi a ottenere la loro class genitrice e l’ordinamento in base a ciò; non è andato lontano, continuando a incorrere in semplici errori.

    Fammi sapere se hai bisogno di ulteriori spiegazioni.

    Saluti,

    Dee.

    Per chiunque altro si imbattesse in questo problema. Capito. Ho messo gli elementi per la class row in un array, e quindi usando quell’array, ho ottenuto i childNode dalla class row. Il motivo per cui la variabile ‘i’ inizia da 2 e non da 0 è perché ho 2 campi che non sono conteggiati nella tabella TimeSheet (codice di lavoro e descrizione). Funziona alla big ora.

    Saluti.

     $(document).on("click", ".cc", function(){ var c = this; if(($(c).children().length) === 0) { var cellval = ""; if ($(c).text()) { cellval = $(this).text(); if(cellval.length === 0) { cellval = $(this).find('.tbltxt').val(); } } var twidth = $(c).width() + 21; var tid= 't' + c.id; if(tid.indexOf('x17') >= 0){ var thtml = ""; eval(spproc(spcol(t[getx(c.id)],thtml,tid,twidth))); // Get current row that has focus var getRow = $(this).parent().attr('class'); // Get the row number for passing through to the next statement var rowPos = getRow.split('r', 5)[1]; // Get all the elements of the row class and assign them to the rowClass array var rowClass = document.getElementsByClassName('r' + rowPos) // Given the rowClass, get the children of the row class and assign them to the new array. var arr = rowClass.item(0).childNodes // Initialize the 'total' variable, and give it a value of 0 var tot = 0; // Begin for loop, give 'i' the value of 2 so it starts from the 3rd index (avoid the Req Code and Description part of the table). for(var i = 2; i 0){ tot += parseInt(arr[i].innerHTML);} } // Assign focus to the 'Total' cell $('#t' + c.id).focus(); // Assign the 'total' variable to the textbox that is dynamically created on the click. $(this).children().val(tot); }else{ var thtml = ""; eval(spproc(spcol(t[getx(c.id)],thtml,tid,twidth))); $('#t' + c.id).focus(); $('#t' + c.id).val(cellval); }} });