Question

我试图通过单击添加按钮来动态添加一行，后来我试图通过单击受尊敬的按钮来上下移动...在代码中，我有3个静态行，在文本框中键入的数据上下完美。但是对于我动态创建的ROW，没有任何动作。

我开始知道javascript不会对动态创建的元素采取措施。如果是这样，我必须解决的问题...谢谢...

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>

我想动态添加带有控件的新tr，稍后我想通过单击上下按钮，然后以重新排序的形式获取其值来重新排序。.

Answer 1

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

Answer 2

我个人更喜欢始终在Javascript JS中编写vanilla。因此，我用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>

重新排序<tr>不适用于新追加的<tr>

2 个答案: