Assigning a value to my td within a table with jQuery

Navigation
6

I can not assign a value to my td within a table, it contains% dynamic% as in the example below: 

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

But the JS code does not work: 

$("#depedente-cpf-31").html('teste');
    
asked by anonymous 11.11.2015 / 19:52

2 answers

5
  

My response was more like a "demonstration" of the other functions   that can be used, the error should really be the lack of   reference to jQuery or is attempting to access the element before it   be created, as was quoted in @Randrade's response 

$("#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><divid="div1">Texto original</div>
<div id="div2">Texto original</div>
<div id="div3">Texto original</div>
    
11.11.2015 / 19:55
4

The shape you are doing is correct. Make sure you are referencing jQuery correctly.

Another possible problem is you are calling the function before the table is formed. If so, just change your position script, or add the $ (document) .read () to your role. 

$("#depedente-cpf-31").html('Olha, funcionou');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="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>
  

Finally, if it does not work, open the browser console (F12) and post the error that is appearing.

    
11.11.2015 / 20:09
list.foreach vs foreach How to correctly save an image URL in MySQL database?