Question

这是我编写的代码，用于获取复选框值并添加行任何人都可以看到这个并找到这个代码的问题

$('.dm_list_data').on('change', function() {
    var $sel = $(this);
    val = $(this).val();
    $opts = $sel.children();
    prevUnselected = $sel.data('unselected');
    var currUnselected = $opts.not(':selected').map(function() {
        return this.value
    }).get();
    var currSelected = $('.dm_list_data').val();
    var post_data = {
        'deliver_id': currSelected
    }
    console.log(post_data);
    $.ajax({
        type: "POST",
        url: base_url + 'curriculum/topicadd/get_deliver_method_details',
        data: post_data,
        datatype: "JSON",
        success: function(msg) {
            var JSONObject = JSON.parse(msg);
            JSONObject.forEach(function(element) {
                var delivery_mtd_name = element.delivery_mtd_name;
                var ftfl_hours = element.ftfl_hours;
                var assessment_hours = element.assessment_hours;
                var slt_hours = element.slt_hours;
                var markup = "<tr><td><input type='text' name='record' value='" + delivery_mtd_name + "'></td><td><input type='text' name='record' value='" + ftfl_hours + "'></td><td><input type='text' name='record' value='" + assessment_hours + "'></td><td><input type='text' name='record' value='" + slt_hours + "'></td></tr>";
                $("table tbody").append(markup);
            });
        }
    });
});

如果我检查了三次，那么行会变成多重状态，请通过图像

Answer 1

在创建新元素并追加之前，只需检查它是否存在。如果不存在，则添加它。只需添加文本框的id和条件。下面的代码可能有语法错误，我只是在浏览器中测试。可能需要进行一些调整。

＆＃13;

$('.dm_list_data').on('change', function() {
  var $sel = $(this);
  val = $(this).val();
  $opts = $sel.children();
  prevUnselected = $sel.data('unselected');
  var currUnselected = $opts.not(':selected').map(function() {
    return this.value
  }).get();
  var currSelected = $('.dm_list_data').val();
  var post_data = {
    'deliver_id': currSelected
  }
  console.log(post_data);
  $.ajax({
    type: "POST",
    url: base_url + 'curriculum/topicadd/get_deliver_method_details',
    data: post_data,
    datatype: "JSON",
    success: function(msg) {
      var JSONObject = JSON.parse(msg);
      JSONObject.forEach(function(element) {
        var delivery_mtd_name = element.delivery_mtd_name;
        var ftfl_hours = element.ftfl_hours;
        var assessment_hours = element.assessment_hours;
        var slt_hours = element.slt_hours;
		if($('#'+delivery_mtd_name).length==0)///added this line
		{
//updated below line
        var markup = "<tr><td><input type='text' name='record' value='" + delivery_mtd_name + "' id='" + delivery_mtd_name + "'></td><td><input type='text' name='record' value='" + ftfl_hours + "'></td><td><input type='text' name='record' value='" + assessment_hours + "'></td><td><input type='text' name='record' value='" + slt_hours + "'></td></tr>";
        $("table tbody").append(markup);
		}
      });
    }
  });
});

＆＃13;

Answer 2

我建议创建一个包含已检查元素的hashmap。触发Onchange只会更新您的hashmap并调用一个函数来创建/删除行。 hashmaps更快更容易编码。将您的密钥设置为表格行的ID。根据检查或取消选中条件，调用所需的功能。

如何根据选中的复选框添加行，并根据未经检查的jquery删除行

2 个答案: