On the success of the function change the color of the td

Question

In the table's td, I have a ternary conditional operation, which will define whether the td is bold or normal, as shown below:

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])) )

If the td is in bold and if the user clicks on the line I want it to be the normal color without updating the table.

For this I am trying this way:

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

If you do console.log (result); clicking will return "1" .

If you do console.log (self); clicking on returns {url: "./marcaler", type: "POST", isLocal: false, global: true, processData: true, ...} but does not change the color of the bold to normal.

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]))
    )

Answer 1

Looking at your updated question, this looks a lot like a use-case for event delegation, if you're putting the same handler ( marld ) on every td in the table. (Or on every td.td-info in the table, etc.)

In that case, remove the onclick="marld()" from the td s and use a single handler on the tbody , like this:

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

or if they all have td-info , be more precise:

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

jQuery will respond to clicks that bubble to the tbody from its contents by checking to see if the click passed through a td / td.td-info and, if so, calling marld with this set to the td that the click passed through.

But if you don't want to use event delegation, readon.

---

Instead of using an old-style onxyz -attribute event handler, create the td and use modern event handling to hook up the marld function; there's also no reason for the $('').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);

Then, in marld this will refer to that td , so use that in your success handler. To make sure this isn't set by the caller, use an arrow function, not a traditional function:

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

---

Re your updated question, you'd hook up marld to those multiple td s by just calling .on on them after appending everything, like this:

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