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的原因是因为我在TimeSheet表（Jobcode和description）中没有计算2个字段。它现在很好用。

干杯。

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

JavaScript＆amp; HTML - 在动态创建的类中修改动态创建的子类

1 个答案: