Assign a value to my td inside a table with jQuery

Asked

Viewed 4,267 times

6

I cannot assign a value to my td within a table, it contains id 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 doesn’t work:

$("#depedente-cpf-31").html('teste');
javascript jquery css html5

2 answers

6


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

  • Uses the jQuery.append to add content at the end of the element
  • And the jQuery.prepend to add content at the beginning of the element.
  • The jQuery.html replaces the entire content of the item with the new.

$("#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>

  • the problem he doesn’t even find this id , gives Undefined

  • I did a test with your HTML and it worked. I edited the answer now.

  • The way you are doing should work as well. You added jQuery’s reference?

4

The way you are doing it 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, simply change your position script, or add the $(Document). read() to its function.

$("#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>

Finally, if it doesn’t work, open the browser console (F12) and post the error that is appearing.

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.