# Rebuild index in dynamic HTML tables

**URL:** <https://discourse.cakephp.org/t/rebuild-index-in-dynamic-html-tables/12372>\
**Category:** Uncategorized\
**Created:** [January 7, 2025, 4:10pm UTC](https://discourse.cakephp.org/t/rebuild-index-in-dynamic-html-tables/12372 "2025-01-07T16:10:14Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dirk](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/dirk/32/2174_2.png) [@dirk](https://discourse.cakephp.org/u/dirk)\
**Post date:** [January 7, 2025, 4:10pm UTC](https://discourse.cakephp.org/t/rebuild-index-in-dynamic-html-tables/12372/1 "2025-01-07T16:10:14Z")

</div>

When dynamically creating or deleting table rows with javascript, the index of the table rows should be updated.  
The same applies to input fields within the table rows.  
I put together an example of how it could be done in javascript.  
Maybe it will help one or the other.

[https://codepen.io/Giesenhausener/pen/wBwpEoL](https://codepen.io/Giesenhausener/pen/wBwpEoL)  
[https://jsfiddle.net/Giesenhausener/ekc7zr5s/7/](https://jsfiddle.net/Giesenhausener/ekc7zr5s/7/)  
[https://github.com/Giesenhausener/Dynamic-Tables](https://github.com/Giesenhausener/Dynamic-Tables)

**Example:**

_Initial Table_

```auto
<table id="ingredientsTable">
    <tbody id="ingredientsTableBody">
        <tr id="ingredientRow_0" class="inputRow">   
            <td><div class="input text"><input type="text" name="ingredients[0][_joinData][amount_name]" list="amounts-datalist_0" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-0-joindata-amount-name" aria-label="Menge..."></div>
                <datalist id="amounts-datalist_0"></datalist>
            </td>
            <td><div class="input text"><input type="text" name="ingredients[0][_joinData][measurement_name]" list="measurements-datalist_0" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-0-joindata-measurement-name" aria-label="Maßeinheit..."></div>
                <datalist id="measurements-datalist_0"></datalist>
            </td>
            <td><div class="input text"><input type="text" name="ingredients[0][name]" list="ingredients-datalist_0" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-0-name" aria-label="Zutat..." maxlength="255"></div>
                <datalist id="ingredients-datalist_0"></datalist>
            </td>
            <td class="actions">
                <button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
                <button onclick="deleteCurrentRow(this)">delete</button>
                <button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
            </td>
        </tr>
    </tbody>
</table>

```

_Table after inserting two more rows and rebuilding the index_

```auto
<table id="ingredientsTable">
  <tbody id="ingredientsTableBody">
      <tr id="ingredientRow_0" class="inputRow">   
          <td><div class="input text"><input type="text" name="ingredients[0][_joinData][amount_name]" list="amounts-datalist_0" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-0-joindata-amount-name" aria-label="Menge..."></div>
              <datalist id="amounts-datalist_0"></datalist>
          </td>
          <td><div class="input text"><input type="text" name="ingredients[0][_joinData][measurement_name]" list="measurements-datalist_0" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-0-joindata-measurement-name" aria-label="Maßeinheit..."></div>
              <datalist id="measurements-datalist_0"></datalist>
          </td>
          <td><div class="input text"><input type="text" name="ingredients[0][name]" list="ingredients-datalist_0" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-0-name" aria-label="Zutat..." maxlength="255"></div>
              <datalist id="ingredients-datalist_0"></datalist>
          </td>
          <td class="actions">
              <button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
              <button onclick="deleteCurrentRow(this)">delete</button>
              <button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
          </td>
      </tr><tr id="ingredientRow_1" class="inputRow">   
          <td><div class="input text"><input type="text" name="ingredients[1][_joinData][amount_name]" list="amounts-datalist_1" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-1-joindata-amount-name" aria-label="Menge..."></div>
              <datalist id="amounts-datalist_1"></datalist>
          </td>
          <td><div class="input text"><input type="text" name="ingredients[1][_joinData][measurement_name]" list="measurements-datalist_1" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-1-joindata-measurement-name" aria-label="Maßeinheit..."></div>
              <datalist id="measurements-datalist_1"></datalist>
          </td>
          <td><div class="input text"><input type="text" name="ingredients[1][name]" list="ingredients-datalist_1" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-1-name" aria-label="Zutat..." maxlength="255"></div>
              <datalist id="ingredients-datalist_1"></datalist>
          </td>
          <td class="actions">
              <button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
              <button onclick="deleteCurrentRow(this)">delete</button>
              <button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
          </td>
      </tr><tr id="ingredientRow_2" class="inputRow">   
          <td><div class="input text"><input type="text" name="ingredients[2][_joinData][amount_name]" list="amounts-datalist_2" autocomplete="off" placeholder="Menge..." oninput="fetchCookingamounts(this.value)" id="ingredients-2-joindata-amount-name" aria-label="Menge..."></div>
              <datalist id="amounts-datalist_2"></datalist>
          </td>
          <td><div class="input text"><input type="text" name="ingredients[2][_joinData][measurement_name]" list="measurements-datalist_2" autocomplete="off" placeholder="Maßeinheit..." oninput="fetchCookingmeasurements(this.value)" id="ingredients-2-joindata-measurement-name" aria-label="Maßeinheit..."></div>
              <datalist id="measurements-datalist_2"></datalist>
          </td>
          <td><div class="input text"><input type="text" name="ingredients[2][name]" list="ingredients-datalist_2" autocomplete="off" placeholder="Zutat..." oninput="fetchIngredients(this.value)" id="ingredients-2-name" aria-label="Zutat..." maxlength="255"></div>
              <datalist id="ingredients-datalist_2"></datalist>
          </td>
          <td class="actions">
              <button onclick="addRowBeforeCurrentRow(this)">oneBefore</button>
              <button onclick="deleteCurrentRow(this)">delete</button>
              <button onclick="addRowAfterCurrentRow(this)">oneAfter</button>
          </td>
      </tr>
  </tbody>
</table>

```