При успешном выполнении функции измените цвет тд - PullRequest
1 голос
/ 04 августа 2020

В td таблицы у меня есть тернарная условная операция, которая определяет, будет ли td жирным или нормальным, как показано ниже:

tbody.append( $('') .append($(`<td class="td-info table__content" data-heading="Assunto" data-alerta="${ Ida }, ${ Paraa }" onclick="marld();" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][2])) )

Если td выделен жирным шрифтом и если пользователь щелкает в строке я хочу, чтобы это был нормальный цвет без обновления таблицы.

Для этого я пробую следующим образом:

function marld(){
    var ite_id = []; //arraypara armazenar os id's a serem deletados
    
    $(".colorir").each(function(){ //percorre todos os tr que possui a classe colorir
     ite_id.push($(this).find(".td-info").attr("data-alerta")); //adiciona o id da linha ao array
    })

    $.ajax({
        url: './marcaler',
        type: 'POST',
        cache: false,
        data: {ite_id:ite_id},
        error: function(){

        },
        success: function(result)
        { 
          var self = this;
            if(result != ''){
                $(self).css("font-weight", "normal")
            }
        
        }
    });      
}   

Если вы сделаете console.log (result);, нажатие вернет "1".

Если вы сделаете console.log (self);, нажатие вернет {url: "./marcaler", type: "POST", isLocal: false, global: true, processData: true, ...}, но не изменит цвет жирного шрифта на нормальный.

tbody complete:

  tbody.append(
        $('<tr class="table__row">')
            .append($(`<td class="table__content" data-heading="De" onclick="marld();" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][1]))
            .append($(`<td class="table__content" data-heading="Tipo" onclick="marld();" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][8]))
            .append($(`<td class="td-info table__content" data-heading="Assunto" data-alerta="${ Ida }, ${ Paraa }" onclick="marld();" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][2]))
            .append($(`<td class="table__content" data-heading="Conteúdo" onclick="marld();" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][3]))
            .append($(`<td class="table__content" data-heading="Estado" onclick="marld();" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][4]))
            .append($(`<td class="table__content" data-heading="Recebido" onclick="marld();" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][5]))
    )

1 Ответ

1 голос
/ 04 августа 2020

Глядя на ваш обновленный вопрос, это выглядит lot как вариант использования для делегирования событий, если вы помещаете один и тот же обработчик (marld) для каждого td в таблице. (Или на каждом td.td-info в таблице и c.)

В этом случае удалите onclick="marld()" из td и используйте единственный обработчик на tbody, например это:

tbody.on("click", "td", marld);

или, если все они имеют td-info, точнее:

tbody.on("click", "td.td-info", marld);

jQuery будет отвечать на щелчки, которые всплывают на tbody из его содержимого проверив, прошел ли клик через td / td.td-info, и, если да, вызвав marld с this, установленным на td, через который прошел клик.

Но если вы не хотите использовать делегирование событий, readon.

Вместо использования обработчика событий onxyz -attribute в старом стиле создайте td и используйте современную обработку событий для подключения функции marld; также нет причин для $('').append(...):

const td = $(`<td class="td-info table__content" data-heading="Assunto" data-alerta="${ Ida }, ${ Paraa }" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`);
td.append(data[i][2]);
td.on("click", marld);
tbody.append(td);

Тогда в marld this будет ссылаться на этот td, поэтому используйте его в своем обработчике успеха. Чтобы убедиться, что this не установлен вызывающим абонентом, используйте функцию стрелки, а не традиционную функцию:

function marld(){
    var ite_id = []; //arraypara armazenar os id's a serem deletados
    
    $(".colorir").each(function(){ //percorre todos os tr que possui a classe colorir
     ite_id.push($(this).find(".td-info").attr("data-alerta")); //adiciona o id da linha ao array
    })

    $.ajax({
        url: './marcaler',
        type: 'POST',
        cache: false,
        data: {ite_id:ite_id},
        error: function(){

        },
        success: (result) => // *** Arrow function
        { 
            if(result != ''){
                $(this).css("font-weight", "normal") // *** Use `this`
            }
        }
    });      
}  

В ответ на ваш обновленный вопрос вы бы подключили marld к этим множественным td s, просто позвонив им .on после добавления всего, например:

tbody.append(
    $('<tr class="table__row">')
        .append($(`<td class="table__content" data-heading="De" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][1]).on("click", mar1ld))
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^
        .append($(`<td class="table__content" data-heading="Tipo" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][8]).on("click", mar1ld))
        .append($(`<td class="td-info table__content" data-heading="Assunto" data-alerta="${ Ida }, ${ Paraa }" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][2]).on("click", mar1ld))
        .append($(`<td class="table__content" data-heading="Conteúdo" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][3]).on("click", mar1ld))
        .append($(`<td class="table__content" data-heading="Estado" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][4]).on("click", mar1ld))
        .append($(`<td class="table__content" data-heading="Recebido" style="font-weight: ${ Stat != '0' ? 'bold' : 'normal' }; font-size: 90%">`).append(data[i][5]).on("click", mar1ld))
)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...