根据检查或为空的内容附加数据答案

【问题标题】：append data based on what is checked or empty根据检查或为空的内容附加数据
【发布时间】：2018-08-24 03:51:30
【问题描述】：

我正在尝试将数据附加到表中，我必须进行切换。选中时，每个开关都会附加不同的文本。

当我检查它们时，它们彼此相邻并带有一个空格，但没有什么可以分隔它们，所以我在附加中添加了一个“，”以很好地分隔它们。

唯一的问题是，如果只有其中一个被选中，它会在其中添加文本，并且旁边有一个逗号，并且没有进一步的文本，所以看起来有点奇怪。

这里是 JS 附加代码：

function addRow() {
    var item_text = $('#item-input').val();
    var item_color = $('#color-input').val();
    var size_text = $('#sizes-item').val();
    var any_color = $('#any-color').is(':checked') ? 'Any Color' : '';
    var any_size = $('#any-size').is(':checked') ? 'Any Size' : '';
    $('#items-table').append('<tr>'
        +'<td>'+item_text+', '+item_color+'</td>'
        +'<td>'+size_text+'</td>'
        +'<td>'+any_color+', '+any_size+'</td>'
        +'<td><button class="remove-btn"><div class="thex">X</div></button><td>'
        +'</tr>');
}

$(function(){
  $('#add-item').click(function(){
    addRow();
    return false;
  });

我想添加类似如果只有其中一个被选中不添加“，”的内容。

我也想在颜色输入中添加相同的内容。就像如果颜色输入为空而不添加“，”一样。

感谢您的帮助，谢谢

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

您可以构建一个数组，过滤掉空项，然后用逗号连接剩余的元素，而不是以线性方式构建字符串。

$('#add-item').on('click', function() {
  const itemData = [$('#item-input').val(), $('#color-input').val()]
    .filter(x => x != '')
    .join(', ');
    
    sizeData =  $('#sizes-item').val();

    checkboxData = [$('#any-color').is(':checked') ? 'Any Color' : '', $('#any-size').is(':checked') ? 'Any Size' : '']
    .filter(x => x != '')
    .join(', ');
  
  $('#items-table').append('<tr>'
        +'<td>'+itemData+'</td>'
        +'<td>'+sizeData+'</td>'
        +'<td>'+checkboxData+'</td>'
        +'<td><button class="remove-btn"><div class="thex">X</div></button><td>'
        +'</tr>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="item-input">
<input id="color-input">
<input id="sizes-item">
<input id="any-color" type="checkbox">
<input id="any-size" type="checkbox">
<button id="add-item">Add Item</button>

<table id="items-table"></table>

【讨论】：

被检查的东西呢？
会非常相似，可以使用已有的三元运算符。使用与[$('#any-color').is(':checked') ? 'Any Color' : '', $('#any-size').is(':checked') ? 'Any Size' : '']相同类型的语句作为数组。我将更新答案 sn-p 以包含此示例。

【解决方案2】：

使用.filter 和.join 会有所帮助。下面是一个工作代码

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

  var item_text = $('#item-input').val();
  var item_color = $('#color-input').val();
  var size_text = $('#sizes-item').val();
  var any_color = $('#any-color').is(':checked') ? 'Any Color' : '';
  var any_size = $('#any-size').is(':checked') ? 'Any Size' : '';

  var item = [any_color, item_color].filter(function(i) {
      return !!i;
    })
    .join(',');

  var sizeColor = [item_text, any_size].filter(function(i) {
      return !!i;
    })
    .join(',');
  $('#items-table').append('<tr>' +
    '<td>' + item + '</td>' +
    '<td>' + size_text + '</td>' +
    '<td>' + sizeColor + '</td>' +
    '<td><button class="remove-btn"><div class="thex">X</div></button><td>' +
    '</tr>');

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>


  <input type="text" id="item-input">
  <input type="text" id="color-input">
  <input type="text" id="sizes-item">
  <input type="checkbox" id="any-color">
  <input type="checkbox" id="any-size">


  <button id="trigger">Run</button>

  <table>
    <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
      </tr>
    </thead>
    <tbody id="items-table">

    </tbody>
  </table>
</div>

【讨论】：