Question

通过单击添加新行按钮，可以生成新的输入框。我要将值从一个输入框（第一列-小时）复制到另一个输入框（第二列-在办公室）。

截屏：

第一行：当值是静态元素时，值从一个输入框复制到另一个输入框。这里的输入框是由HTML创建的。

动态行：当值是动态元素时，不会从一个输入框复制到另一个输入框。这里的输入框是由JavaScript创建的。

问题：

不复制值，因为元素是使用相同的id和name

动态生成的

我尝试过的事情：

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  var actions = $("table td:last-child").html();
  // Append table with add row form on add new button click
  $(".add_new").click(function() {
    var index = $("table tbody tr:last-child").index();
    var row = '<tr>' +
      '<td><input type="number" name="hours[]" id="hours"></td>' +
      '<td><input type="number" name="inoffice[]" id="inoffice"></td>' +
      '</tr>';
    $("table").append(row);
    $('[data-toggle="tooltip"]').tooltip();
  });
  // Add row on add button click
  $(document).on("click", ".add", function() {
    var empty = false;
    var input = $(this).parents("tr").find('input[type="text"]');
    input.each(function() {
      if (!$(this).val()) {
        $(this).addClass("error");
        empty = true;
      } else {
        $(this).removeClass("error");
      }
    });
    $(this).parents("tr").find(".error").first().focus();
    if (!empty) {
      input.each(function() {
        $(this).parent("td").html($(this).val());
      });
    }
  });
});

function sync() {
  var hours = document.getElementById('hours');
  var inoffice = document.getElementById('inoffice');
  inoffice.value = hours.value;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table table-bordered">
  <thead>
    <tr>
      <th>Hours</th>
      <th>In Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="number" name="hours[]" id="hours" onkeyup="sync()" onClick="sync()"></td>
      <td><input type="number" name="inoffice[]" id="inoffice"></td>
    </tr>
  </tbody>
</table>
<input type="button" id="add_new" name="add_new" class="add_new" value="Add New Row">

Answer 1

您不应该复制id属性，因为它是无效的HTML，并且会导致其他问题。改用class属性按常见行为模式对元素进行分组。

从那里，您可以使用委托事件处理程序来处理DOM中将永远存在的所有.hours元素。

还请注意，内联事件属性已过时，应尽可能避免使用。

$('table').on('input', '.hours', function() {
  $(this).closest('tr').find('.inoffice').val(this.value);
});

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  var actions = $("table td:last-child").html();
  
  $(".add_new").click(function() {
    var index = $("table tbody tr:last-child").index();
    var row = '<tr>' +
      '<td><input type="number" name="hours[]" class="hours"></td>' +
      '<td><input type="number" name="inoffice[]" class="inoffice"></td>' +
      '</tr>';
    $("table").append(row);
    $('[data-toggle="tooltip"]').tooltip();
  });
  
  $(document).on("click", ".add", function() {
    var empty = false;
    var input = $(this).parents("tr").find('input[type="text"]');
    input.each(function() {
      if (!$(this).val()) {
        $(this).addClass("error");
        empty = true;
      } else {
        $(this).removeClass("error");
      }
    });
    $(this).parents("tr").find(".error").first().focus();
    if (!empty) {
      input.each(function() {
        $(this).parent("td").html($(this).val());
      });
    }
  });
  
  $('table').on('input', '.hours', function() {
    $(this).closest('tr').find('.inoffice').val(this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Hours</th>
      <th>In Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="number" name="hours[]" class="hours"></td>
      <td><input type="number" name="inoffice[]" class="inoffice"></td>
    </tr>
  </tbody>
</table>
<input type="button" id="add_new" name="add_new" class="add_new" value="Add New Row">

Answer 2

首先创建一个MCVE。这意味着删除所有不属于问题的代码。这将使一切变得更清晰。
删除ID，因为ID必须是唯一的，所以我们最好改用类。

$(document).ready(function() {
  
  $(".add_new").click(function() {
    var index = $("table tbody tr:last-child").index();
    var row = '<tr>' +
      '<td><input type="number" name="hours[]" class="hours"></td>' +
      '<td><input type="number" name="inoffice[]" class="inoffice"></td>' +
      '</tr>';
    $("table").append(row);
    $('[data-toggle="tooltip"]').tooltip();
  });
  
});

$(document).on("keyup", ".hours", function(){
  $(this).parent().parent().find(".inoffice").val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table table-bordered">
  <thead>
    <tr>
      <th>Hours</th>
      <th>In Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="number" name="hours[]" class="hours"></td>
      <td><input type="number" name="inoffice[]" class="inoffice"></td>
    </tr>
  </tbody>
</table>
<input type="button" id="add_new" name="add_new" class="add_new" value="Add New Row">

如何将值从一个输入框复制到另一个输入框？

2 个答案: