Create title attribute in td mounted by javascript

Question

Create title attribute in td mounted by javascript

Navigation

#1 by (2 votes)
#2 by (2 votes)

5

I have a table named gridContudo . In this table, there is this <td> : { width: 100, name: 'OBSERVACAO', index: 'OBSERVACAO', label: 'Observação'}] . What I need is to create a title attribute on this < td> . How I do? If I put this: title: 'meu_title' , it just does not work. I did this, but I did not understand everything:

$('#gridConteudo tr td:nth-child(15)').each(function (i) {
    if (i > 0) { //skip header
        var sContent = $(this).text();
        $(this).attr("title", $(this).html());
        //if (sContent.length > 20) {
        //    $(this).text(sContent.substring(0, 20) + '...');
        //}
    }
});

I did not quite understand this line:

tr td:nth-child(15)')

As the contents of <td> is too large, I put this line, but it did not work:

if (sContent.length > 20) {
   $(this).text(sContent.substring(0, 20) + '...');

As I'm having trouble making it work as a whole, I believe it did not work because of these issues. It did not work it did not show more than 20 lines.

Below is my function that mounts the table. The examples I downloaded, work on a table made by pure html, but when I apply the table below, it does not work at all.

function CarregarGrid() {
            $('#gridConteudo').jqGrid({
                colModel: [{ width: 80, name: 'COD_OPERADORA', index: 'COD_OPERADORA', label: 'Operadora', formatter: GridOperadoraFormatter },
                           { name: 'NOM_OPERADORA', index: 'NOM_OPERADORA', hidden: true },
                           { width: 80, name: 'SITUACAO', index: 'SITUACAO', label: 'Situação' },
                           { width: 90, name: 'DT_EXCLUSAO_OPERADORA', index: 'DT_EXCLUSAO_OPERADORA', label: 'Dt. Exclusão Operadora', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 130, name: 'COD_REDE', index: 'COD_REDE', label: 'Rede', formatter: GridRedeFormatter },
                           { name: 'NOM_REDE', index: 'NOM_REDE', hidden: true },
                           { width: 90, name: 'DT_EXCLUSAO_REDE', index: 'DT_EXCLUSAO_REDE', label: 'Dt. Exclusão Rede' },
                           { width: 120, name: 'COD_PRESTADOR_SUBSTITUTO', index: 'COD_PRESTADOR_SUBSTITUTO', label: 'Prestador Substituto', formatter: GridPrestadorSubstitutoFormatter },
                           { name: 'NOME_PRESTADOR_SUBSTITUTO', index: 'NOME_PRESTADOR_SUBSTITUTO', hidden: true },
                           { width: 115, name: 'DESC_MOTIVO_EXCLUSAO', index: 'DESC_MOTIVO_EXCLUSAO', label: 'Motivo Exclusão' },
                           { width: 95, name: 'DT_NOTIF_VOLUNTARIA', index: 'DT_NOTIF_VOLUNTARIA', label: 'Dt. Notificação Excl. Voluntária', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_ATD', index: 'DT_LIMITE_ATD', label: 'Dt. Limite Realização', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_REMESSA', index: 'DT_LIMITE_REMESSA', label: 'Dt. Limite Apresentação', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_RECURSO', index: 'DT_LIMITE_RECURSO', label: 'Dt. Limite Reapresentação', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_FIM_EXIBE_DIRECIONAMENTO', index: 'DT_FIM_EXIBE_DIRECIONAMENTO', label: 'Dt. Fim Exibe Site', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 100, name: 'OBSERVACAO', index: 'OBSERVACAO', label: 'Observação'}],
                url: urlControle + '/GetPrestadorOperadora',
                mtype: 'POST',
                postData: { "pEXEC": function () { return $("#pEXEC").val(); }, "pCodPrestadorTS": function () { return $("#hidCodPrestadorTS").val(); } },
                jsonReader: { repeatitems: false, root: function (obj) { return obj.Items; } },
                datatype: "json",
                autowidth: true,
                shrinkToFit: false,
                forceFit: true,
                loadonce: true,
                loadError: function (xhr, st, err) { $.notificacoes.erro("@TopSaudeResource.notificacao_erro_transacao"); },
                loadComplete: function () {

                    if ($('#hidCodPrestadorTS').val() != '') {

                        var linhas = $("#gridConteudo").getDataIDs();

                        if (linhas.length <= 0) {
                            $('#divConteudo').hide();
                            $.notificacoes.erro("Prestador não está excluído em nenhuma Operadora e/ou Rede");
                        }
                        else {
                            $('#divConteudo').removeAttr('style');
                            $('#divConteudo').show();
                        }

                        $('table tbody tr td').each(function () {
                            var td = $(this);
                            var texto = td.text();
                            if (texto.length > 30) {
                                texto = texto.substr(0, 30) + '...';
                            }
                            td.attr('title', texto);
                        })
                    }
                }
            });

            $('#gridConteudo').jqGrid('setLabel', 'COD_OPERADORA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'SITUACAO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_EXCLUSAO_OPERADORA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'COD_REDE', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_EXCLUSAO_REDE', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'COD_PRESTADOR_SUBSTITUTO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DESC_MOTIVO_EXCLUSAO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_NOTIF_VOLUNTARIA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_ATD', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_REMESSA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_RECURSO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_FIM_EXIBE_DIRECIONAMENTO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'OBSERVACAO', '', { 'text-align': 'left' });
        }

The tootpti should be in the OBSERVATION column.

javascript jquery tooltip

asked by anonymous 14.12.2015 / 12:10

2 answers

Is it possible to do form authentication / validation with pure Node.js? Why can I access normal functions before the declaration, but the anonymous functions do not? [duplicate]

score 2 · Answer 1

I do not quite understand this line: 'tr td: nth-child (15)'

The nth-child () selector allows you to select the child element of a parent element, either at index, child element class, or formula.

In your case '#gridConteudo td:nth-child(15)' you are selecting the column at index 15 of your table.

As the content of 'td' is too large, I put this line, but it did not work:

To limit the amount of characters, its function is correct, I just created a function and I'm calling it in two moments, to change the table text and the title of the table. You also do not need to check whether or not the first line is, if you have tbody and thead in your table, just add it to the function.

You are using the attr function of jQuery to change the title attribute, if you are using a recent version of jQuery, that function has been changed to prop .

/ p>

View your refactored code:

$('#gridConteudo tbody td:nth-child(15)').each(function () {
    var sContent = $(this).text();
    //Alterar title
    $(this).attr("title", limitarCaracteres(sContent, 20));
    //Alterar coluna da tabela
    $(this).html(limitarCaracteres(sContent, 20));

    function limitarCaracteres(texto, qtde) {
        if (texto.length > qtde)
           texto = sContent.substring(0, qtde) + '...';
        return texto;
    });
});

score 2 · Answer 2

What I need is to create a title attribute in this `<td>` . How do I do?

You can do this:

$('table tbody tr td').each(function() {
  var td = $(this);
  var texto = td.text();
  td.attr('title', texto);
  if (texto.length > 30) {
    texto = texto.substr(0, 30) + '...';
  }
  td.text(texto);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><tableclass="table text-center">
  <thead>
    <tr>
      <td>Descrição</td>
      <td>Valor</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
        Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado.</td>
      <td>R$10</td>
    </tr>
    <tr>
      <td>Café</td>
      <td>R$5</td>
    </tr>
  </tbody>
</table>

Create title attribute in td mounted by javascript

2 answers

I do not quite understand this line: 'tr td: nth-child (15)'

As the content of 'td' is too large, I put this line, but it did not work:

View your refactored code:

What I need is to create a title attribute in this <td> . How do I do?

What I need is to create a title attribute in this `<td>` . How do I do?