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 表（作业代码和描述）。现在效果很好。

干杯。

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