JavaScript＆HTML-在動態創建的類中修改動態創建的子類

Question

問題：

我有一個動態創建的HTML表，用於填寫時間表。 它是通過程序創建的-沒有正式控制。 該設計混合了CSS和通過JavaScript創建的文本框。 現在，此表的每個“行”都在一個名為“ divRow”的類中，並且通過將“ r”和為其分配的行號作為該類（例如，“ divRow r1”，“ divRow r2”）與其他表分開'等）。

在每個“ divRow”中，我有一個單元名為“ divCell cc”。 這些在類名稱中沒有任何標識符。 在最后一個單元格中，我有一個“總計”列，該列理想地計算了行的總數，然后將其添加到動態創建的文本框中。

我目前所擁有的：

// 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);
        }}
});

如您所見，當用戶單擊“ divCell cc”時，如果不存在，則會創建一個文本框。 如果用戶單擊第17列（x17），則它將運行for循環，並將合計的值分配給文本框。

我需要發生的事情：

所以現在發生的是最后一個單元格求和每個具有值的單元格的總和。 但是，它們與行無關。 我需要它根據當前處於“打開”狀態的行進行計算。 因此，如果我要計算第二行，則不希望將第一，第二和第三行的總和輸入到總數中，而只希望對第二行的值求和。

我嘗試過的

我嘗試遍歷並使用“ divRow r＃”數字來嘗試獲取以該數字結尾的數組中的項目。 （單元格的ID為'x＃y＃'，分配給這些單元格的文本框的ID為'tx＃y＃'）。

我試過通過單元類的名稱獲取元素，然后獲取其父類並按其排序。 並沒有走遠，請繼續遇到簡單的錯誤。

讓我知道是否需要更多說明。

干杯，

迪

Answer 1

對於遇到此問題的其他任何人。 我知道了。 我將行類的元素放入數組中，然后使用該數組從行類中獲取childNodes。 變量“ i”從2而不是0開始的原因是因為我有2個未在TimeSheet表中計數的字段（Jobcode和description）。 現在效果很好。

干杯。

$(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);
        }}
});