Question

我创建了一个包含两个选择框的表格和一个玉石中的单个文本框。

当我单击我的按钮添加更多行时，在用户更改了第二个选择框后，通过使用ajax更改第一个选择，我的行添加代码将停止工作。

任何人都可以在下面的代码中看到我可能出错的地方。

我的玉码：

form(method ='Post', action='/orderlist/#{login_id}', data-bv-message='') 
              .form-group
               input.form-control(type='text', name='order_date', value='', id='orderdate' ,placeholder='Enter the date' style='width:65%;') 
              .table-responsive
               table#item_table.items.table.table-striped.table-bordered
                thead
                 tr
                  th(style='min-width: 200px;') Menu
                  th(style='min-width: 200px;') Item
                  th(style='min-width: 200px;') Item Quantity  
                  //th(style='min-width: 200px;') Action 
                tbody
                 tr
                  td(style='vertical-align: top; width:150px')
                    select.form-control(name='menu' , class = 'menu_list' , id="menu_item" )
                     option(value='' ) ---Select---
                     each val in orders
                      option(name = 'food' ,value=' #{val.availability_type }' , selected = selected) #{val.availability_type } 
                  td(class='item_select' style='vertical-align: top; width:150px')
                    select.form-control(name=""  )
                     option(value='' ) ---Select---
                  td(style='vertical-align: top; width:150px')
                    input.form-control(type='text',placeholder='Enter the quantity' value='', name='order_qty')
                  //td(style='vertical-align: top; width:150px')
                    //button.btn.btn-success.color(type='button',value='addrow',name='add',class='addRow') Add 
                    //&nbsp 
                    //button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete 
              .pull-left
                .form-group
                 button#forgot-btn.btn.btn-success.color(type='submit',value='ordered',name='submit') Submit 
                 &nbsp 
                 button#forgot-btn.btn.btn-success.color(type='cancel',value='cancelled',name='cancel') Cancel
              .pull-right
                .form-group 
                 button.btn.btn-success.color(type='button',value='addrow',name='add' , id="addRow") Add 
                 &nbsp 
                 button.btn.btn-success.color(type='button',value='removerow',name='remove' id='deleteRow') Delete

我的ajax代码：脚本。

$.noConflict();
$(document).ready(function() {

$('.menu_list').change(function() {
var menus = $('.menu_list').val();
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");

  $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {

    var selectList = "<select name='item'  class='form-control'>";
      $.each(item, function(key, value){
       //var product_id = value.product_id;
        selectList += "<option value='"+value.product_id+"'>"+value.product_name+"</option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
    }
  });
});
$('#addRow').click(function(){
alert("table");
$('#item_table tbody').append($("#item_table tbody tr:last").clone());
});

Answer 1

你能告诉我们在ajax电话中究竟有什么不起作用吗？选择列表没有填满，或者您甚至没有在服务器上执行某些操作？

这里有一些关于代码的评论：

$('.menu_list').change(function() {
var menus = $(this).val(); //If you have menu_list on each row use the current one
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");

  $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {

    var selectList = "<select name='item'  class='form-control'>";
    //it's json so don't need scan the array like this. You can access the property directly.
      $.each(item, function(){
                   selectList += "<option value='"+this.product_id+"'>"+this.product_name+"</option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
    }
  });
});

此外，您必须在动态创建html时绑定事件：

$('#addRow').click(function(){

    $('#item_table tbody').append($("#item_table tbody tr:last").clone());
    $("#item_table tbody tr:last").find('.menu_list').change(function() {
var menus = $(this).val(); //If you have menu_list on each row use the current one
console.log($(this).val());
var t = $(this);
t.parents('tr').find('.item_select').html("kkkkk");

  $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {

    var selectList = "<select name='item'  class='form-control'>";
    //it's json so don't need scan the array like this. You can access the property directly.
      $.each(item, function(){
                   selectList += "<option value='"+this.product_id+"'>"+this.product_name+"</option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
    }
  });
});

});

Answer 2

我找到了我昨天发布的问题的解决方案。

script.
 $.noConflict();
 $(document).ready(function() {
  Items();
  $('#addRow').click(function(){
  alert("table");
  $('.item_menu tbody').append($(".item_menu tbody tr:last").clone());
  alert("enter23")
  Items();
  }); 
  $("#orderdate").click(function(){
  alert("welcome");
  var date = new Date();
  var currentMonth = date.getMonth();
  var currentDate = date.getDate();
  var currentYear = date.getFullYear();
  var minDate=new Date(currentYear, currentMonth, currentDate);
  $("#orderdate").datepicker({dateFormat:'yy-mm-dd',  beforeShowDay: 
  });
});   
function Items(){
 $('.menu_list').on('change',function() {
 var menus = $(this).val();
 console.log($(this).val());
 var t = $(this);
 t.parents('tr').find('.item_select').html("kkkkk");
    $.ajax({
    url: '/submenu',
    type: "POST",
    dataType: 'json',
    data: {"menu": menus},
    success: function(item) {
      var selectList = "<select name='item'  class='form-control'>";
      $.each(item, function(key, value){
       //var product_id = value.product_id;
         selectList += "<option value='"+value.product_id+"'>"+value.product_name+"
         </option>";
      }); 
      selectList +="</select>";
      t.parents('tr').find('.item_select').html(selectList);
     }
    });
 });
}

如何使用jquery + node js在表中添加和删除行

2 个答案: