javascript - 仅当基于 td 中用 javascript/jquery 标记有 id 的值显示时才尝试计算总和

Question

我在表格中有几个字段，使用复选框显示和隐藏。我想计算表底部总计字段中的总和，其中仅包含已切换为可见的值。现在我只能让它显示总计中的所有值，而不仅仅是可见的值。

这些脚本组合起来可以操作页面上的所有功能。

<script type="text/javascript"> 
            $(document).ready(function() { 
                $('input[type="checkbox"]').click(function() { 
                    var inputValue = $(this).attr("value"); 
                    $("." + inputValue).toggle(); 

                }); 
            }); 
</script> 
<script>
$(document).ready(function() {

    $("input[type=checkbox]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
        }
        else {
            $("." + divId).hide();
        }

    });
});
</script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> 
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

这是没有 CSS 的表格的基本结构。

<center>  
        <div style="width:600px;">  
                <input type="checkbox" name="colorCheckbox"
                        value="lippro"> Lippro</label>
        </div>
</center>


<div class="lippro" style="float:left;width:45%;display:none;">
<p>
    <strong>Lippro</strong> <br />
    <input class="my-activity" type="checkbox" value="42"> example<br/>
    <input class="my-activity" type="checkbox" value="43"> example<br/>
    <input class="my-activity" type="checkbox" value="44"> example<br/>
    <input class="my-activity" type="checkbox" value="45"> example<br/>
    <input class="my-activity" type="checkbox" value="46"> example<br/>
</p>
</div>
<table>
<thead>
<tr>
<th>Pro</th>
<th></th>
<th></th>
<th>Price</th>
</tr>
</thead>
<tbody id="displaytable">
<tr class="41" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">4500</td></tr><tr class="42" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">7800</td></tr><tr class="43" style="display:none">
<td>First Area</td>
<td></td>
<td></td><td class="price">6900</td></tr><tr class="44" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">6000</td></tr><tr class="45" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">8500</td></tr><tr class="46" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">8500</td></tr>
<tfoot class="shown"><tr><td colspan="3">Total:</td>
<td id="total"></td></tr></tfoot>
</tbody>
</table>

我尝试使用此 JavaScript 函数，但它会计算所有总数，而不仅仅是显示的总数。

var cls = document.getElementById("displaytable").getElementsByTagName("td");
var sum = 0;
for (var i = 0; i < cls.length; i++){
    if(cls[i].className == "countable"){
    sum += isNaN(cls[i].innerHTML) ? 0 : parseInt(cls[i].innerHTML);
    }
}   
document.getElementById('total').innerHTML += sum;

取自 fiddle在这里找到。

Answer 1

看起来你是个新手......

const displayTable = document.getElementById('display-table')
  ,   lipProCkBxs  = document.querySelectorAll('#lip-pro input[type=checkbox]')
  ,   tableTotal   = document.querySelector('#display-table tfoot tr td:last-child')
  ;
function showTR()
  {
  let total = 0
    ;
  lipProCkBxs.forEach( CkBx=>
    {
    let TRlist = displayTable.querySelectorAll('.c'+CkBx.value)
    if (CkBx.checked) 
      {
      TRlist.forEach(TR=>
        {
        TR.style='display: table-row'
        total += Number( TR.cells[3].textContent )
        })
      }
    else
      { TRlist.forEach(TR=>TR.style='') }
    })
  tableTotal.textContent = total
  }


// first time
lipProCkBxs.forEach( CkBx=>
  {
  CkBx.checked  = false
  CkBx.onchange = showTR
  })

body  { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
Table { border-collapse: collapse; margin-top: 1em; width:20em; }
td    { border: 1px solid grey; padding: 2px 10px; }
thead { background-color: turquoise;}
tfoot { background-color: orchid;}

#display-table tbody tr { display: none; }

#display-table tbody tr td:last-child,
#display-table tfoot tr td:last-child { text-align: right;}

<div id="lip-pro">
    <h3>Lippro</h3>
    <label> <input class="my-activity" type="checkbox" value="41" /> v41 </label>
    <label> <input class="my-activity" type="checkbox" value="42" /> v42 </label>
    <label> <input class="my-activity" type="checkbox" value="43" /> v43 </label>
    <label> <input class="my-activity" type="checkbox" value="44" /> v44 </label>
    <label> <input class="my-activity" type="checkbox" value="45" /> v45 </label>
    <label> <input class="my-activity" type="checkbox" value="46" /> v46 </label>
  </div>

  <table id="display-table">
    <thead>
      <tr>
        <th>Pro</th>
        <th></th>
        <th></th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr class="c41" >
        <td>example v41</td>
        <td></td>
        <td></td>
        <td class="price">4500</td>
      </tr>
      <tr class="c42" >
        <td>example v42</td>
        <td></td>
        <td></td>
        <td class="price">7800</td>
      </tr>
      <tr class="c43" >
        <td>First Area v43</td>
        <td></td>
        <td></td>
        <td class="price">6900</td>
      </tr>
      <tr class="c44" >
        <td>example v44</td>
        <td></td>
        <td></td>
        <td class="price">6000</td>
      </tr>
      <tr class="c45" >
        <td>example v45</td>
        <td></td>
        <td></td>
        <td class="price">8500</td>
      </tr>
      <tr class="c46" >
        <td>example v46</td>
        <td></td>
        <td></td>
        <td class="price">8500</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Total:</td>
        <td colspan="3">0</td>
      </tr>
    </tfoot>
  </table>