JavaScript & HTML - Modifying dynamically created

Question

Problem:

I have a dynamically created HTML table, that is used for filling out time sheets. It is created programmatically - there is no formal control. The design is a mix of CSS with text boxes being created through JavaScript. Now each 'row' of this table is in a class called 'divRow', and is separated from the others by having 'r' and the number of the row assigned to it as the class (i.e 'divRow r1', 'divRow r2', etc.).

Within each of these 'divRow's, I have cells in a class called 'divCell cc'. These do not have any identifiers in the class name. At the very last cell, I have a 'Total' column, which ideally calculates the total of the row and then adds it into a dynamically created text box.

What I have at the moment:

// 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 = "<input id='t" + c.id + "' type='text' Class='tbltxt' style='width: " + twidth + "px;' readonly />";
            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<arr.length; i++){
                if(parseInt(arr[i].innerHTML) > 0){
                    tot += parseInt(arr[i].innerHTML);}
            }

            $('#t' + c.id).focus();
            $(this).children().val(tot);

        }else{
            var thtml = "<input id='t" + c.id + "' type='text' Class='tbltxt' style='width: " + twidth + "px;' />";
            eval(spproc(spcol(t[getx(c.id)],thtml,tid,twidth)));
            $('#t' + c.id).focus();
            $('#t' + c.id).val(cellval);
        }}
});

As you can see, when the user clicks on the 'divCell cc', it creates a text box if one is not present. If the user clicks on the 17th column ('x17'), then it runs the for loop, and assigns the value of the total to the text box.

What I need to happen:

So what happens now is that the last cell sums the total of each cell that has a value. However, they are not row-dependent. I need it to calculate based on the row that it is currently 'on'. So if I'm calculating the 2nd row, I don't want the sum of the first, second and third being entered into the total, I just want the 2nd rows' values summed.

What I've tried:

I've tried looping through and using the 'divRow r#' number to try and get the items in the array that end in that number. (cells are given an id of 'x#y#' and the text boxes assigned to those cells are given an id of 'tx#y#').

I've tried getting elements by the cell class name, and then getting their parent class and sorting by that; didn't get far though, keep running into simple errors.

Let me know if you need more explanation.

Cheers,

Dee.

Answer 1

For anyone else that ever runs into this issue. I got it. I put the elements by the row class into an array, and then using that array, I got the childNodes from the row class. The reason the variable 'i' starts at 2 and not 0 is because I have 2 fields that are not counted in the TimeSheet table (Jobcode and description). It's working great now.

Cheers.

$(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 = "<input id='t" + c.id + "' type='text' Class='tbltxt' style='width: " + twidth + "px;' readonly />";
            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<arr.length; i++){
                if(parseInt(arr[i].innerHTML) > 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 = "<input id='t" + c.id + "' type='text' Class='tbltxt' style='width: " + twidth + "px;' />";
            eval(spproc(spcol(t[getx(c.id)],thtml,tid,twidth)));
            $('#t' + c.id).focus();
            $('#t' + c.id).val(cellval);
        }}
});