6

Não consigo atribuir um valor à minha td dentro de uma tabela, ela contém id dinâmico como no exemplo abaixo:

<table class="table table-condensed table-hover" id="tabelaDependentes">
    <caption>Lista de Dependentes</caption>
    <thead>
        <tr>
            <th>CPF</th>
            <th>Tipo Dependente</th>
        </tr>
    </thead>
    <tbody>
        <tr style="cursor: pointer" data-depedente-id="30">
            <td id="depedente-cpf-30">2323</td>
            <td id="depedente-tipo-30">teste</td>
        </tr>
        <tr style="cursor: pointer" data-depedente-id="31">
            <td id="depedente-cpf-31">09298618417</td>
            <td id="depedente-tipo-31">teste</td>
        </tr>
        <tr style="cursor: pointer" data-depedente-id="32">
           <td id="depedente-cpf-32">jose2</td>
            <td id="depedente-tipo-32">teste</td>
        </tr>
        <tr style="cursor: pointer" data-depedente-id="33">
            <td id="depedente-cpf-33">123</td>
            <td id="depedente-tipo-33">teste</td>
        </tr>
    </tbody>
</table>

Porém o código JS não funciona:

$("#depedente-cpf-31").html('teste');

2 Respostas 2

6

Minha resposta ficou mais como uma "demonstração" das outras funções que podem ser utilizadas, o erro realmente deve ser a falta da referência ao jQuery ou é tentado acessar o elemento antes do mesmo ser criado, como foi citado na resposta do @Randrade

  • Usa o jQuery.append para adicionar conteúdo no fim do elemento
  • E o jQuery.prepend para adicionar conteúdo no começo do elemento.
  • O jQuery.html substitui todo o conteúdo do elemento pelo novo.

$("#div1").append(" <b>Adicionado usando append()</b>");
$("#div2").prepend("<b>Adicionado usando prepend()</b> ");
$("#div3").html(" <b>Adiciondo usando html()</b> ");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Texto original</div>
<div id="div2">Texto original</div>
<div id="div3">Texto original</div>

3
  • o problema que ele nem encontra esse id , dá undefined Commented 11/11/2015 às 18:56
  • Fiz um teste com teu HTML e funcionou. Editei a resposta agora. Commented 11/11/2015 às 18:58
  • A maneira que você está fazendo deveria funcionar também. Você adicionou a referencia do jQuery? Commented 11/11/2015 às 19:01
4

A forma que está fazendo está correta. Verifique se você está referenciando o jQuery corretamente.

Outro possível problema é você está chamando a função antes da tabela estar formada. Se for isso, basta alterar o seu script de posição, ou adicionar o $(document).read() à sua função.

$("#depedente-cpf-31").html('Olha, funcionou');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-hover" id="tabelaDependentes">
  <caption>Lista de Dependentes</caption>
  <thead>
    <tr>
      <th>CPF</th>
      <th>Tipo Dependente</th>
    </tr>
  </thead>
  <tbody>
    <tr style="cursor: pointer" data-depedente-id="30">
      <td id="depedente-cpf-30">2323</td>
      <td id="depedente-tipo-30">teste</td>
    </tr>
    <tr style="cursor: pointer" data-depedente-id="31">
      <td id="depedente-cpf-31">09298618417</td>
      <td id="depedente-tipo-31">teste</td>
    </tr>
    <tr style="cursor: pointer" data-depedente-id="32">
      <td id="depedente-cpf-32">jose2</td>
      <td id="depedente-tipo-32">teste</td>
    </tr>
    <tr style="cursor: pointer" data-depedente-id="33">
      <td id="depedente-cpf-33">123</td>
      <td id="depedente-tipo-33">teste</td>
    </tr>
  </tbody>
</table>

Por fim, caso não funcione, abra o console do browser (F12) e poste o erro que está aparecendo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .