如何将表数据放入jQuery中的数组？

Question

我想从动态表中获取值并在ajax调用中发送该值，我动态地增加了表行，但是当我尝试将行值纳入数组时，它仅存储第一行值。

我的HTML代码：

<table class="table table-bordered table-hover table-sm" id="SizeTable">
<thead>
    <tr>
        <th><input type="checkbox" class="allGridCheck"></th>
        <th style="width: 50%;">Size</th>
        <th style="width: 50%;">Quantity</th>
        <th class="hidden"></th>
    </tr>
</thead>
<tbody class="GridContent table-secondary" id="GridBody">
    <tr class="GridFields">
        <td><input type="checkbox" class="singleGridCheck"></td>
        <td>
            <select class="form-control form-control-sm size-id" name="SizeId"></select>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm quantity-value" name="QuantityValue" />
        </td>
        <td class="hidden"></td>
    </tr>
</tbody>

这是我的脚本：

var sizesId = [];
var sizesValue = [];

$('#SizeTable > tbody  > tr').each(function() {
  var sizeId = $('.size-id option:selected').val();
  var sizeValue = $('.quantity-value').val();

  if (sizeId) {
    sizesId.push(sizeId);
  }

  if (sizeValue) {
    sizesValue.push(sizeValue);
  }

  alert(sizeId);
});

alert(sizesId);
alert(sizesValue);

如何将值带入数组？

Answer 1

因为您总是选择所选项目

$('.size-id option:selected').val(); 

在您的阵列中获得一件物品是正常的

使用此

$('#SizeTable > tbody  > tr').each(function() {


           var sizeId = $(this).find('.size-id').val();
           var sizeValue = $(this).find('.quantity-value').val();

           if (sizeId) {
               sizesId.push(sizeId);
           }

           if (sizeValue) {
               sizesValue.push(sizeValue);
           }

           alert(sizeId);
       });

Answer 2

查看下面的修改后的代码以获取动态表的值。

var sizesId = [];
var sizesValue = [];
$('#SizeTable > tbody  > tr > td').each(function(ind, val) {
     var varSizeId = $(val).find(".size-id option:selected").text();
     var varSizeValue = $(val).find("input[name='QuantityValue']").val();
     if (varSizeId) {
         sizesId.push(varSizeId);
     }
     if (varSizeValue) {
         sizesValue.push(varSizeValue);
     }
 });
 console.log(sizesId);
 console.log(sizesValue);

Answer 3

jQuery使我们变得懒惰，看不到明显的东西

我考虑了遍历每个单元格的复杂性和冗余性，然后突然想到，您的<table>的值不是来自<table>，而是来自<select>和{ {1}}。 jQuery对象在许多方面都类似于数组，因此只需忽略表并使用对象本身即可。 BTW从选择中获取价值比您在代码中尝试的要简单得多。只需从select中获取值即可：

<input>

真正的快速解释。您需要迭代（也就是循环➰）正确的jQuery对象。如果您要查找一组var value = $('select').val(); // jQuery var value = document.querySelector('select'); // JavaScript 的值，请不要迭代<select> ...重复遍历<table> s

---

演示

<select>

$('#rowBtn').on('click', addRows);
$('#delData').on('click', deleteData);
$('#fillTab').on('click', fillTable);
$('#xtcData').on('click', extractData);
$('.chkAll').on('change', checkAll);



function addRows(e) {
  var dock = $('#gridCore');
  var row = $('.gridRow');
  var qty = Number($('#rowUI').val());
  var rQty = $('#gridTable')[0].rows.length;

  for (let i = 0; i < qty; i++) {
    var dupe = row.clone(true, true).appendTo(dock);
    dupe.find(':checkbox').addClass('chk');
  }
  return console.log(`
  Rows.: ${parseInt(rQty, 10)}
  Cells: ${parseInt(rQty, 10) * 2}`);
}

function fillTable(e) {
  $('.size, .qty').each(function() {
    var sVal = ["S", "M", "L"];
    var sRng = getRandom(0, 2);
    var qRng = getRandom(0, 600);
    if ($(this).is('.size')) {
      $(this).val(sVal[sRng]);
    } else {
      $(this).val(qRng);
    }
  });
}

function extractData(e) {
  var sz = [];
  var qy = [];
  var sZqY = {};
  $('.size, .qty').each(function(idx) {
    if ($(this).is('.size')) {
      var SV = $(this).val();
      sz.push(SV);
    } else {
      var QV = $(this).val();
      qy.push(QV);
    }
  });
  sZqY.qty = qy;
  sZqY.size = sz;
  return console.log(JSON.stringify(sZqY));
}

function deleteData(e) {
  var rows = $('#gridTable')[0].rows.length;
  var chx = $('.chk');
  chx.each(function(idx) {
    var row = $(this).closest('.gridRow');
    if ($(this)[0].checked) {
      row.remove();
      rows--;
      if (rows === 1) {
        return false;
      }
    }
  });
  return console.log(rows);
}

function checkAll(e) {
  if ($(this)[0].checked) {
    $('.chk').prop('checked', true);
  } else {
    $('.chk').prop('checked', false);
  }
  return $('.chk').prop('checked');
}

function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

label {
  display: block
}

#xtcData,
#fill {
  transform: translateX(0px);
  transition: 0s
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}