Reordering not working for newly append

Question

I am trying to add a row dynamically by clicking the add button and later i am trying to move up and down by clicking the respected buttons... In the code i amhaving 3 static rows, the data typed in the textbox goes up and down perfectly. But regarding the ROW which i have dynamically created, there is no action.

I came to know that javascript wont get action for dynamically created elements.. If so, what i have to do solve this issue...Thanks...

var html = '<tr><td>row 4</td><td><input type="text" name="uname"></td><td><input type="button" value="move up" class="move up" /></td><td><input type="button" value="move down" class="move down" /></td></tr>';

$(function() {
  $('#addRow').click(function() {
    $('tbody').append(html);
  });


  $('#mytable input.move').click(function() {
    var row = $(this).closest('tr');
    if ($(this).hasClass('up'))
      row.prev().before(row);
    else
      row.next().after(row);
  });
});

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <table>
    <tbody id="mytable">
      <tr>
        <td>row 1</td>
        <td><input type="text" name="uname"></td>
        <td><input type="button" value="move up" class="move up" /></td>
        <td><input type="button" value="move down" class="move down" /></td>
      </tr>
      <tr>
        <td>row 2</td>
        <td><input type="text" name="uname"></td>
        <td><input type="button" value="move up" class="move up" /></td>
        <td><input type="button" value="move down" class="move down" /></td>
      </tr>
      <tr>
        <td>row 3</td>
        <td><input type="text" name="uname"></td>
        <td><input type="button" value="move up" class="move up" /></td>
        <td><input type="button" value="move down" class="move down" /></td>
      </tr>
    </tbody>
  </table>
  <button id="addRow">Add</button>
</body>

</html>

I would like to add new tr with controls dynamically and later i would like to reorder the same by clicking the up and down button and then to get its values in the reordered form..

score 0 · Answer 1 · answered Jul 02 '19 at 06:58

Use Jquery Event Delegation

$(document).on('click', '#mytable input.move', function() { ... });

var html = '<tr><td>row 4</td><td><input type="text" name="uname"></td><td><input type="button" value="move up" class="move up" /></td><td><input type="button" value="move down" class="move down" /></td></tr>';

$(function() {
  $('#addRow').click(function() {
    $('tbody').append(html);
  });

  $(document).on('click', '#mytable input.move', function() {
    var row = $(this).closest('tr');
    if ($(this).hasClass('up'))
      row.prev().before(row);
    else
      row.next().after(row);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tbody id="mytable">
    <tr>
      <td>row 1</td>
      <td><input type="text" name="uname"></td>
      <td><input type="button" value="move up" class="move up" /></td>
      <td><input type="button" value="move down" class="move down" /></td>
    </tr>
    <tr>
      <td>row 2</td>
      <td><input type="text" name="uname"></td>
      <td><input type="button" value="move up" class="move up" /></td>
      <td><input type="button" value="move down" class="move down" /></td>
    </tr>
    <tr>
      <td>row 3</td>
      <td><input type="text" name="uname"></td>
      <td><input type="button" value="move up" class="move up" /></td>
      <td><input type="button" value="move down" class="move down" /></td>
    </tr>
  </tbody>
</table>

<button id="addRow">Add</button>

Thanks a lot Aswin Kumar... Works like charm...you have saved my day.. — user3661448, Jul 02 '19 at 07:12

score -1 · Answer 2 · answered Jul 02 '19 at 08:18

My personal preferred is to write Javascript always in vanilla JS. So I rewrote the answer in vanilla JS.

//define table
const table = document.getElementById('table');

//set eventlisteners for the up,down and add buttons
Array.from(document.getElementsByClassName('table__move-up')).map(button => button.addEventListener('click' , () => moveRowUp(button.parentNode.parentNode)));
Array.from(document.getElementsByClassName('table__move-down')).map(button => button.addEventListener('click' , () => moveRowDown(button.parentNode.parentNode)));
Array.from(document.getElementsByClassName('add__row')).map(button => button.addEventListener('click' , () => addRow(table)));

//the function to move the row up
function moveRowUp(row) {
  if (row == table.children[0]) return;
  row.parentNode.insertBefore(row, row.previousElementSibling);
}

//the function to move the row down
function moveRowDown(row) {
  if (row == table.children[table.children.length - 1]) return;
  row.parentNode.insertBefore(row.nextElementSibling, row);
}

//the function to add a new row to the table
function addRow() {
  //add new tr
  const row = document.createElement('TR');
  table.appendChild(row);

  //add a new column with inside the text. For example row 6
  const tableNameCell = document.createElement('TD');
  row.appendChild(tableNameCell);
  tableNameCell.innerText = `row ${table.children.length}`;

  //add a new column with inside the text input
  const inputCell = document.createElement('TD');
  row.appendChild(inputCell);
  const inputText = document.createElement('INPUT');
  inputCell.appendChild(inputText);
  inputText.type = 'text';

  //add a new column with inside the move up button
  const moveUpCell = document.createElement('TD');
  row.appendChild(moveUpCell);
  const inputButtonUp = document.createElement('INPUT');
  moveUpCell.appendChild(inputButtonUp);
  inputButtonUp.type = 'button';
  inputButtonUp.value = 'move up';
  inputButtonUp.addEventListener('click' , () => moveRowUp(inputButtonUp.parentNode.parentNode));

  //add a new column with inside the move down button
  const moveDownCell = document.createElement('TD');
  row.appendChild(moveDownCell);
  const inputButtonDown = document.createElement('INPUT');
  moveDownCell.appendChild(inputButtonDown);
  inputButtonDown.type = 'button';
  inputButtonDown.value = 'move down';
  inputButtonDown.addEventListener('click' , () => moveRowDown(inputButtonDown.parentNode.parentNode));
}

<body>
  <table>
    <tbody id="table">
      <tr>
        <td>row 1</td>
        <td><input type="text"></td>
        <td><input type="button" value="move up" class="table__move-up" /></td>
        <td><input type="button" value="move down" class="table__move-down" /></td>
      </tr>
      <tr>
        <td>row 2</td>
        <td><input type="text"></td>
        <td><input type="button" value="move up" class="table__move-up" /></td>
        <td><input type="button" value="move down" class="table__move-down" /></td>
      </tr>
      <tr>
        <td>row 3</td>
        <td><input type="text"></td>
        <td><input type="button" value="move up" class="table__move-up" /></td>
        <td><input type="button" value="move down" class="table__move-down" /></td>
      </tr>
    </tbody>
  </table>
  <button class="add__row">Add</button>
</body>

Reordering not working for newly append

2 Answers2