的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

对于任何曾经遇到过这个问题的人。我知道了。我把行类中的元素放入一个数组中，然后使用该数组，我得到了row类中的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); 
     }} 
});