how can i fill a table html with JQuery

Question

I try to make a table in HTML and want to boost it with jQuery .

The table is static and I wish firstly to the first column I call " Index " generate an index list with a for loop. For a visual like this:

Indice | champs 1 | champs 2 | champs 3 |

 1

 2

 3

 4
 ...

My table has identifier id ="balance", and the rest of the fields of the table I want to generate after .

Code I tried:

for (i = 1; i <= 8; i++) {
  $('.bilan td:first-child').append("<td><strong>" + i + "</strong></td>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="bilan" cellspacing="0">
  <tr>
    <td><strong>Indice</strong></td>
    <td><strong>Comptoir</strong></td>
    <td><strong>Nb commandes</strong></td>
    <td><strong>CA (&#x20ac;)</strong></td>
    <td><strong>% CA</strong></td>
    <td><strong>Nouveaux clients</strong></td>
  </tr>
</table>

Welcome to SO, can you share some of the code you have tried and we can see where you might be going wrong ? — Pogrindis, Mar 02 '16 at 14:21
This is probably related : http://stackoverflow.com/questions/8749236/create-table-with-jquery-append — Pogrindis, Mar 02 '16 at 14:22
Please visit the [help] and [tour] to see what and how to ask — mplungjan, Mar 02 '16 at 14:22
for(i=1 ;i <=8; i++){ $('.bilan td:first-child').append(""+i+""); } — k. oth, Mar 02 '16 at 14:25
Since we have none of your jQuery code you've tried, please look into jquery's `find()` and `closest()`. You can traverse elements (like tables) looking for information and get/set the text using `text()` — ntgCleaner, Mar 02 '16 at 14:26
Please review [ask]. This question, as written, is far too broad. — zzzzBov, Mar 02 '16 at 14:29

score 0 · Accepted Answer · answered Mar 02 '16 at 14:37

Perhaps you mean

for (i = 1; i <= 8; i++) {
  $(".bilan").append("<tr><td><strong>" + i + "</strong></td></tr>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="bilan" cellspacing="0">
  <tr>
    <td><strong>Indice</strong></td>
    <td><strong>Comptoir</strong></td>
    <td><strong>Nb commandes</strong></td>
    <td><strong>CA (&#x20ac;)</strong></td>
    <td><strong>% CA</strong></td>
    <td><strong>Nouveaux clients</strong></td>
  </tr>
</table>

Or better.

for (i = 1; i <= 8; i++) {
  $(".bilan tbody").append("<tr><td><strong>" + i + "</strong></td></tr>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="bilan" cellspacing="0">
  <thead>
    <tr>
      <th>Indice</th>
      <th>Comptoir</th>
      <th>Nb commandes</th>
      <th>CA (&#x20ac;)</th>
      <th>% CA</th>
      <th>Nouveaux clients</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

How can I do to select the last column in my table to hide ? — k. oth, Mar 02 '16 at 16:28

how can i fill a table html with JQuery

1 Answers1