如果没有焦点的文本框中有数据，则创建新行，并且在第二行下拉列表中不提供数据

HTML Create a new row if data is present in the textbox without focus also and on second row drop down does not provide data only

本文关键字：提供数据 下拉列表 二行 新行 文本 焦点 数据 如果没有 创建      更新时间：2023-09-26

我有一个问题，这里的问题是，一个新的行没有创建，直到一些数据不是手动键入我试图产生值到一些文本框上的下拉更改，但仍然在下拉更改的值填充在文本框上，仍然行没有创建和第二行，第二行下拉不提供数据更改也

$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select class="dd" name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option><option value="test2">test 2</option></select></td> <td>   <input type="text" name="renewal_by1" id="renewal_by1" />  </td>   <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>');
$('#results').on('focus', ':input', function() {
    $(this).closest('tr').filter(function() {
        return !$(this).data('saved');
      })
      .find(':input').each(function() {
        $(this).data('value', this.value);
        $(this).closest('tr').data('saved', true);
      });
  })
  .on('input change', ':input', function() {
    $(this).data('filled', this.value != $(this).data('value'))
    var tr = $(this).closest('tr');
    all = tr.find(':input'),
      fld = all.filter(function() {
        return $(this).data('filled');
      });
    if (all.length == fld.length) {
      if (!tr.data('done')) {
        $('#buttonclck')[0].click();
        tr.data('done', true);
      }
    } else {
      if (tr.data('done')) {
        tr.next('tr').remove();
        tr.data('done', false);
      }
    }
  });
$('#buttonclck').on('click', function() {
  var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
  var cloned = lastRow.clone();
  cloned.find('input, select').each(function() {
    var id = $(this).attr('id');
    var regIdMatch = /^(.+)('d+)$/;
    var aIdParts = id.match(regIdMatch);
    var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
    $(this).attr('id', newId);
    $(this).attr('name', newId);
  });
  cloned.find("input[type='text']").val('');
  cloned.insertAfter(lastRow);
});
$('#productanddates tr').on('change', '.dd', function(e) {
  var data = "dummy data";
  $(this).closest('td').prev().find('input').val(data);
  $(this).closest('td').next().find('input').val(data);
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="results"></div>
<input id="buttonclck" type="button" class="hide" value="button" />

要解决您想要触发input或change事件，一旦您通过编程更改任何输入元素的值:

$(this).closest('td').prev().find('input').val(data).trigger('input');
$(this).closest('td').next().find('input').val(data).trigger('input');

下面是一些对你将来有帮助的解释:

$('#productanddates tr').on('change','.dd', function(e) {
//  ^The selector you put here must refer to an element that is in the DOM
//   when the page loads. The `tr` element does not exist at page load
//   and therefore is not a valid element to use

$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

裁判:http://api.jquery.com/live/

应该这样做:

$('#results').on('change','.dd', function(e) {

相关文章：