Question

我正在使用多重日期选择器一次选择多个日期。当用户单击某个日期时，它将动态地添加到表行中；如果用户再次单击同一日期，则它将从表行中删除。下面是我的代码，有人可以告诉我哪里错了吗？

var arr = [];
$('#multiple-date-select').multiDatesPicker({
  onSelect: function(datetext) {
    if (arr.includes(datetext)) {
      var table = document.getElementById('table-data');
      var data = document.getElementById('newrow');
      data.removeChild(td);
    } else {
      var table = document.getElementById('table-data');
      var row = document.createElement('tr');
      var col = document.createElement('td');
      row.setAttribute('id', 'newrow');
      col.innerHTML = datetext;
      row.appendChild(col);
      table.appendChild(row);
    }
  }
});

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<form name="select-multiple">
  <input id="multiple-date-select" />
</form>
<table id="table-data" border="1"></table>

Answer 1

您应该为每个新创建的tr设置一些唯一的ID，并通过选择该ID来删除它。我已更新脚本：

<script>
    var arr = [];
    $('#multiple-date-select').multiDatesPicker({onSelect: function (datetext) {
            var index = arr.indexOf(datetext),
                    table = document.getElementById('table-data');
            if (index > -1) {
                document.getElementById(datetext).remove();
                arr.splice(index, 1);
            } else {
                var row = document.createElement('tr'),
                        col = document.createElement('td');
                row.setAttribute('id', datetext);
                col.innerHTML = datetext;
                row.appendChild(col);
                table.appendChild(row);
                arr.push(datetext);
            }
        }});
</script>

Answer 2

<script>
    var arr = [];
    $('#multiple-date-select').multiDatesPicker({onSelect:function(datetext){

        if(arr.includes(datetext)){
            var table = document.getElementById('table-data');
            var data = document.getElementById(datetext);
            data.remove(); 
            arr.splice(datetext,1)
        }else{
            arr.push(datetext)
            var table = document.getElementById('table-data');
            var row = document.createElement('tr');
            var col = document.createElement('td');
            row.setAttribute('id',datetext);
            col.innerHTML = datetext;
            row.appendChild(col);
            table.appendChild(row);         
        }   
    }});        
 </script>

Answer 3

您要同时保持数组和一组表行同步。您需要在行上使用唯一的行ID，因此，如果您确实希望在它们上使用ID，我们需要使用一些。

您需要添加/删除表中的行和数组元素。您已经有了jQuery，所以我用它来管理行并将数据放在这些行上。

现在要保留唯一的ID，我们在表上使用data属性来跟踪添加的最后一个ID，随着添加的行将其递增，id将始终是唯一的。

注意：我对在id属性中使用斜杠（将日期文本用作该id）非常谨慎，因为稍后可能会遇到选择或管理该问题的问题。我通过这种解决方案避免了这种情况。

var arr = [];

function removeRow(r) {
  var index = arr.indexOf(r);
  if (index > -1) {
    arr.splice(index, 1);
  }
}
$('#multiple-date-select').multiDatesPicker({
  onSelect: function(datetext) {
    let table = $('#table-data');
    let rowLast = table.data('lastrow');
    let rowNext = rowLast + 1;
    let r = table.find('tr').filter(function() {
      return ($(this).data('date') == datetext);
    }).eq(0);
    // a little redundant checking both here 
    if (!!r.length && arr.includes(datetext)) {
      removeRow(datetext);
      r.remove();
    } else {
      // not found so add it
      let col = $('<td></td>').html(datetext);
      let row = $('<tr></tr>');
      row.data('date', datetext);
      row.attr('id', 'newrow' + rowNext);
      row.append(col).appendTo(table);
      table.data('lastrow', rowNext);
      arr.push(datetext);
    }
  }
});
// set start, first row will be 0 could be in markup
$('#table-data').data('lastrow', -1);

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<form name="select-multiple">
  <input id="multiple-date-select" />
</form>
<table id="table-data" border="1"></table>

在日期选择器中选择多个日期

3 个答案: