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