javascript - JS如何计算表格中行的值？

Question

比如有这样一张表，里面有FootballPlayers, Swimmers, BasketballPlayers和Sum单元格，每行依次相加，如何在Total行统计并记录有多少足球运动员、游泳运动员和篮球运动员添加？

function deleteRow() {
			tg.deleteRow(1);
			if (document.all("tg").rows.length == 2) {
				document.getElementById("b").disabled=true;
			}
}
    
function addRow() {
		var f1 = document.getElementById("f1").value;
			var f1k = parseInt(f1);
			if (isNaN(f1k)) {
				f1k=0;
			}
			
			var f2 = document.getElementById("f2").value;
			var f2k = parseInt(f2);
			if (isNaN(f2k)) {
				f2k=0;
			}
			
			var f3 = document.getElementById("f3").value;
			var f3k = parseInt(f3);
			if (isNaN(f3k)) {
				f3k=0;
			}
			var sum1 = (f1k+f2k+f3k);
			var row = document.createElement("TR")
			
			var tbody = document.getElementById("tg").insertRow(1);
			
			var r1=tbody.insertCell(0);
			r1.innerHTML="";
			
			var r2=tbody.insertCell(1);
			r2.innerHTML=f1;
			
			var r3=tbody.insertCell(2);
			r3.innerHTML=f2;
			
			var r4=tbody.insertCell(3);
			r4.innerHTML=f3;
			
			var r4=tbody.insertCell(4);
			r4.innerHTML=sum1;
			
			if(document.all("tg").rows.length >= 3) {
				document.getElementById("b").disabled=false;
			}
}

#tg  {border-collapse:collapse;border-spacing:0;}
#tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg .tg-yw4l{vertical-align:top}

<div class="row">
			<label for="n">FootballPlayers: </label>
			<input type="text" id="f1" />
</div>
<div class="row">
			<label for="n">Swimmers: </label>
			<input type="text" id="f2" />
</div>
	<div class="row">
			<label for="n">BasketballPlayers: </label>
			<input type="text" id="f3" />
			<button id="a" onClick="addRow();return false;" >Add</button>
			<button id="b" onClick="deleteRow();return false;">Delete</button>
</div>

<table id="tg">
  <tr>
    <th class="tg-031e"></th>
    <th class="tg-031e">FootballPlayers</th>
    <th class="tg-031e">Swimmers</th>
    <th class="tg-yw4l">BasketballPlayers</th>
    <th class="tg-yw4l">Sum</th>
  </tr>
  <tr>
    <td class="tg-031e">Total</td>
    <td class="tg-031e"></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
</table>

Answer 1

这里是一个例子，只有total FootballPlayers 步骤 1) 添加行时为 FootballPlayers 列添加一个类 步骤 2) 在添加一行和删除一行时调用 total() javascript 函数

    <div class="row">
  <label for="n">FootballPlayers: </label>
  <input type="text" id="f1" />
</div>
<div class="row">
  <label for="n">Swimmers: </label>
  <input type="text" id="f2" />
</div>
<div class="row">
  <label for="n">BasketballPlayers: </label>
  <input type="text" id="f3" />
  <button id="a" onClick="addRow();return false;" >Add</button>
  <button id="b" onClick="deleteRow();return false;">Delete</button>
</div>

<table id="tg">
  <tr>
    <th class="tg-031e"></th>
    <th class="tg-031e">FootballPlayers</th>
    <th class="tg-031e">Swimmers</th>
    <th class="tg-yw4l">BasketballPlayers</th>
    <th class="tg-yw4l sum">Sum</th>
  </tr>
  <tr>
    <td class="tg-031e">Total</td>
    <td class="tg-031e total_fb_players"></td>
    <td class="tg-031e total_summers"></td>
    <td class="tg-yw4l total_bb_players"></td>
    <td class="tg-yw4l total_sum"></td>
  </tr>
</table>

<style>
#tg  {border-collapse:collapse;border-spacing:0;}
#tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg .tg-yw4l{vertical-align:top}
</style>

<script>

  function deleteRow() {
    tg.deleteRow(1);
    if (document.all("tg").rows.length == 2) {
      document.getElementById("b").disabled=true;
    }
    total();
  }

function addRow() {
var f1 = document.getElementById("f1").value;
  var f1k = parseInt(f1);
  if (isNaN(f1k)) {
    f1k=0;
  }

  var f2 = document.getElementById("f2").value;
  var f2k = parseInt(f2);
  if (isNaN(f2k)) {
    f2k=0;
  }

  var f3 = document.getElementById("f3").value;
  var f3k = parseInt(f3);
  if (isNaN(f3k)) {
    f3k=0;
  }
  var sum1 = (f1k+f2k+f3k);
  var row = document.createElement("TR")

  var tbody = document.getElementById("tg").insertRow(1);

  var r1=tbody.insertCell(0);
  r1.innerHTML="";

  var r2=tbody.insertCell(1);
  r2.classList.add('fb_players')
  r2.innerHTML=f1;

  var r3=tbody.insertCell(2);
  r3.classList.add('summers')
  r3.innerHTML=f2;

  var r4=tbody.insertCell(3);
  r4.classList.add('bb_players')
  r4.innerHTML=f3;

  var r5=tbody.insertCell(4);
  r5.classList.add('sum')
  r5.innerHTML=sum1;

  if(document.all("tg").rows.length >= 3) {
    document.getElementById("b").disabled=false;
  }
  total();
}
function total() {
  var fb_players = document.getElementsByClassName("fb_players");
  var total_fb_players = 0;
  for(var i = 0; i < fb_players.length; i++) {
    var v = parseInt(fb_players[i].innerHTML);
    if (isNaN(v)) {
      v=0;
    }
    console.log(v);
    total_fb_players += v;
  }
  console.log(total_fb_players);
  var total_fb_players_html = document.querySelector(".total_fb_players"); 
  total_fb_players_html.innerHTML=total_fb_players;

}

</script>