JavaScript и HTML - изменение динамически созданных подклассов в динамически создаваемом классе

Question

JavaScript и HTML - изменение динамически созданных подклассов в динамически создаваемом классе

0

Проблема:

У меня есть динамически созданная таблица 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 и присваивает значение суммарному текстовому полю.

Что мне нужно:

Итак, что происходит сейчас, так это то, что последняя ячейка суммирует общее количество каждой ячейки, которая имеет значение. Однако они не зависят от строк. Мне нужно, чтобы он вычислялся на основе строки, в которой он сейчас включен. Поэтому, если я вычисляю вторую строку, я не хочу, чтобы сумма первого, второго и третьего была введена в общую сумму, я просто хочу, чтобы значения 2-й строки суммировались.

Что я пробовал:

Я попытался выполнить цикл и использовать число "divRow r #", чтобы попытаться получить элементы в массиве, которые заканчиваются на этом номере. (ячейкам присваивается идентификатор "x # y #", а текстовым полям, назначенным этим ячейкам, присваивается идентификатор "tx # y #").

Я попытался получить элементы по имени класса ячейки, а затем получить их родительский класс и отсортировать его; хотя и не дошли далеко, продолжайте работать с простыми ошибками.

Дайте мне знать, если вам нужно больше объяснений.

Ура,

Ди.

DeeKayy90 04 март 2014, в 09:39

Источник

Теги:

javascript

class

html

arrays

subclass

1 ответ

Ещё вопросы

DeeKayy90 · Accepted Answer · 2014-03-10T02-28-00.000Z

Для всех, кто когда-либо сталкивался с этой проблемой. Я понял. Я поместил элементы класса 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);
        }}
});