Question

$.each(opt1, function(i, e) { $('#dd1').append('<option value="'+i+'">'+e+'</option>'); });
  $.each(opt2[0], function(i, e) { $('#dd2').append('<option value="'+i+'">'+e+'</option>'); });
  $.each(opt3[0][0], function(i, e) { $('#dd3').append('<option value="'+i+'">'+e+'</option>'); });
  $('body').on('change', '#dd1', function() {

    $('#dd2, #dd3').empty();

    $.each(opt2[$('#dd1').val()], function(i, e) {
      $('#dd2').append('<option value="'+i+'">'+e+'</option>');
    });
    $.each(opt3[$('#dd1').val()][$('#dd2').val()], function(i, e) {

      $('#dd3').append('<option value="'+i+'">'+e+'</option>');
    });
  });
  $('body').on('change', '#dd2', function() {
    $('#dd3').empty();
    $.each(opt3[$('#dd1').val()][$('#dd2').val()], function(i, e) {
      $('#dd3').append('<option value="'+i+'">'+e+'</option>');
    });
  });

我有三个下拉列表和两个输入部分，当用户单击按钮“ Ekle”时，将其输入值插入到表中。 Part of the application involving drop downs, input areas and a blank table

上面的代码将根据先前下拉列表的选择填充下拉列表。

An example of dropdown selections

An example too

我想将用户输入（选定的下拉项目和输入值）保存在表的行中。每个提交的输入列表都记录为一行。首先，在具有disabled属性值的输入字段中向用户显示记录的输入。

$("#add").click(function(){
      if (!input1.value.replace(/\s/g, '').length) {
       alert('Input field cannot be left blank.');
      } else {

          document.getElementById("submit").disabled = false;
          $("tbody").append(
            '<tr id="row'+num+'" >'+
            '<th>Step '+(num+1)+'</th>'+
            '<td class="editable"><input  type="text" class="form-control saveddd1" value="---" disabled></td>'+
            '<td class="editable "><input type="text" class="form-control saveddd2" value="---" disabled></td>'+
            '<td class="editable"><input  type="text" class="form-control saveddd3" value="---" disabled></td>'+
            '<td class="editable"><input   type="text" class="form-control savedinput1" splaceholder="Giriş" disabled>'+
            '<td class="editable"><input  type="text" class="form-control savedinput2" placeholder="Giriş" disabled>'+
            '</td>'+
            '<td>'+
            '<button id="rmv" data-toggle="modal"'+
             'data-target="#deleteModal" type="button" class="btn"><i class="fa fa-remove"></i></button>'+
             '<button id="edit" type="button" class="btn"><i class="fa fa-edit"></i></button>'+
            '</td>'+

            '</tr>'
          )
          num++;
        }
   });

Stored input values in the rows

每行有7列，每列5个包含用户输入，另2个作为操作来编辑内容或从表中删除该行。当用户单击特定行中的编辑按钮时，所有区域都将成为enabled，以进行显式编辑。由于每行的前三列都包含下拉列表中的选择，因此应将其还原为下拉列表，就像它们被插入表之前一样。

$("table tbody").on('click', "#edit", function() {
     var cell = $(this).parent();
     row = cell.parent();
     $(this).remove();
     cell.append('<button  id="save" class="btn"><i class="fa fa-save"></i></button>');
     row.find(".saveddd1").replaceWith($("#dd1").clone().attr('class', 'form-control added1'));
     row.find(".saveddd2").replaceWith($("#dd2").clone().attr('class', 'form-control added2'));
     row.find(".saveddd3").replaceWith($("#dd3").clone().attr('class', 'form-control added3'));
     row.find(".savedinput1")[0].disabled = false;
     row.find(".savedinput2")[0].disabled = false;

    });

Upper row is in the editing mode.

设置为编辑模式的每一行中的下拉菜单必须采用级联样式，就像在第二张和第三张图像中一样。我找不到解决方法。行的唯一ID格式为id="row'+num+'"，其中num表示当表插入行时表中的行数。连续每三个下拉列表都有一个名为saveddd1，saveddd2和saveddd3的类。我真正需要做的是在编辑模式下将事件处理程序绑定到每一行的下拉列表，以使它们分别级联。任何帮助表示赞赏。

将同一事件绑定到表中的每个动态创建的元素？

0 个答案: