Question

我有一张桌子。

<table id="tab1">
   <thead>
      <tr>
         <th>Select</th>
         <th>Name of the item</th>
         <th>Qty</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td id="name"></td>
         <td id="qty"></td>
      </tr>
   </tbody>
</table>

我想从选中复选框的表行中获取所有json格式的项目。

我尝试过的事情：-

$(".submit-row").click(function () {
  alert("items submitted");
  var s = $('#tab1 tr').filter(':has(:checkbox:checked)').find('td')
  //console.log(s)

  var jsonObj = [];
  $("#tab1 tr").slice(1).each(function (index, element) {

    item = {}

    item["name"] = $(this).find('td#name').text();
    item["number"] = $(this).find('td#qty').text();

    jsonObj.push(item);

  });
  console.log(jsonObj)

});

我也尝试使用选中的属性，但是没有运气。

$("table > tbody > tr").each(function () {
  if ($(".checkBoxClass").is(":checked")) {
    console.log($(this).find('td').eq(1).text() + " " + $(this).find('td').eq(2).text());
  }
});

在两个解决方案中都选择了所有元素。

Answer 1

在jQuery代码中，您发现页面上所有具有类checkBoxClass的元素，并检查是否检查了其中的任何元素...

if ($(".checkBoxClass").is(":checked")) {

相反，您希望基于.each ...

中的当前元素来获取一个。

$("table > tbody > tr").each(function () {
  if ($(this).find(".checkBoxClass").is(":checked")) {
    console.log($(this).find('td').eq(1).text() + " " + $(this).find('td').eq(2).text());
  }
});

您也可以通过不重复$(this) ...

来提高效率。

$("table > tbody > tr").each(function () {
  var $tr = $(this);
  if ($tr.find(".checkBoxClass").is(":checked")) {
    var $td = $tr.find("td");
    console.log($td.eq(1).text() + " " + $td.eq(2).text());
  }
});

因此请注意，您的HTML也是无效的，因为不能有多个元素与id和<td id="name">具有相同的<td id="qty">...。您最好使用类...

$(function(){
  $(".checkBoxClass").on("click", function() {
    var data = [];
    $("table > tbody > tr").each(function () {
      var $tr = $(this);
      if ($tr.find(".checkBoxClass").is(":checked")) {
        data.push({
          name: $tr.find(".name").text(),
          number: Number($tr.find(".qty").text())
        });
      }
    });
    console.clear();
    console.log(JSON.stringify(data));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab1">
   <thead>
      <tr>
         <th>Select</th>
         <th>Name of the item</th>
         <th>Qty</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">One</td>
         <td class="qty">1</td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">Two</td>
         <td class="qty">2</td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">Three</td>
         <td class="qty">3</td>
      </tr>
      <tr>
         <td><input type="checkbox" class="checkBoxClass" name="record"></td>
         <td class="name">Four</td>
         <td class="qty">4</td>
      </tr>
   </tbody>
</table>

Answer 2

您可以尝试使用以下代码段。

HTML

<table id="tab1">
  <thead>
    <tr>
      <th>Select</th>
      <th>Name of the item</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">A</td>
      <td id="qty">B</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">C</td>
      <td id="qty">D</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">E</td>
      <td id="qty">F</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">G</td>
      <td id="qty">H</td>
    </tr>
  </tbody>
</table><table id="tab1">
  <thead>
    <tr>
      <th>Select</th>
      <th>Name of the item</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">I</td>
      <td id="qty">J</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">K</td>
      <td id="qty">L</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">M</td>
      <td id="qty">N</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass" name="record"></td>
      <td id="name">O</td>
      <td id="qty">P</td>
    </tr>
  </tbody>
</table>

<button class="submit-row">Submit</submit>

JS

$(".submit-row").click(function(){
  let chkboxes = $('.checkBoxClass');

  for(let i = 0; i < chkboxes.length; i++) {
    if (chkboxes[i].checked) {
      let parentTr = chkboxes[i].parentNode.parentNode; 

      let name = $(parentTr)[0].children[1].innerHTML;
      let qty = $(parentTr)[0].children[2].innerHTML;

      let obj = {
        'chk': true,
        name,
        qty
      }

      console.log(obj);
    }
  }
});

这是codepen-https://codepen.io/aditya-bhave/pen/orVGWm

如果选中复选框，则从一行的td获取所有值

2 个答案: