Question

我在项目上工作，其中有一个表格，其中包含多个标题，数字，金钱和复选框的结果。我需要确定复选框是否未经检查，并且它不会将结果合并到单个数组中。我们如何做到这一点？请提供建议

我想结合例如：

成单个数组，如：

总和大,1.9995,1;总和小,1.9995,1;虎,1.9995,1;

html：

<tbody id="confirm-table-body">
<tr>
    <td> 总和大</td>
    <td style="color: red">1.9995</td>
    <td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
    <td><input type="checkbox" checked=""></td>
</tr>
<tr>
    <td> 总和小</td>
    <td style="color: red">1.9995</td>
    <td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
    <td><input type="checkbox" checked=""></td>
</tr>
<tr>
    <td> 虎</td>
    <td style="color: red">1.9995</td>
    <td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
    <td><input type="checkbox" checked=""></td>
</tr>
<tr>
    <td colspan="2">组数: <span id="confirm-gropup-nums">3</span></td>
    <td colspan="2">总金额: <span id="confirm-total-amount">3</span></td>
</tr>
</tbody>

JS：

"确定": function(){
                var count = parseFloat($('#confirm-total-amount').html());
                if(!isNaN(count) && count == 0){
                    alert("Please enter money!");
                }else{ 
                    Combine single array here !!!!

                }
            },

Answer 1

试试这个，

function getCheckedRows() {
  var arr = [];
  $('table :checkbox:checked').each(function() {
    td = $(this).closest('tr').find('td');
   
    arr.push([$(td[0]).text(), $(td[1]).text(), $(td[2]).find('input').val()].join());
  });
  $('#confirm-total-amount').text($('table :checkbox:checked').length)
  return arr.join(';');
}


$('table :checkbox').on('change', function() {
  console.log(getCheckedRows());
});
console.log(getCheckedRows());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="confirm-table-body">
    <tr>
      <td> 总和大</td>
      <td style="color: red">1.9995</td>
      <td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
      <td><input type="checkbox" checked=""></td>
    </tr>
    <tr>
      <td> 总和小</td>
      <td style="color: red">1.9995</td>
      <td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
      <td><input type="checkbox" checked=""></td>
    </tr>
    <tr>
      <td> 虎</td>
      <td style="color: red">1.9995</td>
      <td style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
      <td><input type="checkbox" checked=""></td>
    </tr>
    <tr>
      <td colspan="2">组数: <span id="confirm-gropup-nums">3</span></td>
      <td colspan="2">总金额: <span id="confirm-total-amount">3</span></td>
    </tr>
  </tbody>
</table>

Answer 2

这可以使用jquery完成。为了便于使用，我添加了一些td类。

HTML：

<tbody id="confirm-table-body">
<tr>
    <td class="title"> 总和大</td>
    <td class="number" style="color: red">1.9995</td>
    <td class="money" style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
    <td><input type="checkbox" checked=""></td>
</tr>
<tr>
    <td class="title"> 总和小</td>
    <td class="number" style="color: red">1.9995</td>
    <td class="money" style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
    <td><input type="checkbox" checked=""></td>
</tr>
<tr>
    <td class="title"> 虎</td>
    <td class="number" style="color: red">1.9995</td>
    <td class="money" style="padding: 3px 10px 3px 10px"><input value="1" style="width: 80px"></td>
    <td><input type="checkbox" checked=""></td>
</tr>
<tr>
    <td colspan="2">组数: <span id="confirm-gropup-nums">3</span></td>
    <td colspan="2">总金额: <span id="confirm-total-amount">3</span></td>
</tr>
</tbody>

JS：

function(){
        var count = parseFloat($('#confirm-total-amount').html()),
            output = [];
        if (!isNaN(count) && count == 0) {
            alert("Please enter money!");
        } else { 
            $("td input[type=checkbox]:checked").each(function() {
                var $parent = $(this).parent();

                output.push({
                    "title": $parent.find(".title").html(),
                    "number": $parent.find(".number").html(), 
                    "money": $parent.find(".money input").val(),
                })
            })
        }
    }

循环遍历表中的多个数组并组合在单个数组中

2 个答案: