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

这是一个例子，只有TotalPlayers总数 第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>

Answer 2

为您的单元格添加类，并为表格中的每个总列添加ID，并执行如下

下面的代码段

＆＃13;

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;
  r2.className = "football";

  var r3 = tbody.insertCell(2);
  r3.innerHTML = f2;
  r3.className = "swimmer";

  var r4 = tbody.insertCell(3);
  r4.innerHTML = f3;
  r4.className = "basketball";

  var r4 = tbody.insertCell(4);
  r4.innerHTML = sum1;

  if (document.all("tg").rows.length >= 3) {
    document.getElementById("b").disabled = false;
  }
  var football_el = document.getElementsByClassName("football");
  var swim_count_el = document.getElementsByClassName("swimmer");
  var basketball_el = document.getElementsByClassName("basketball");
  var list = [football_el, swim_count_el, basketball_el];
  grand_sum = 0;
  for (var y = 0; y < list.length; ++y) {
    var sum = 0;

    for (var x = 0; x < list[y].length; ++x) {
      sum += Number(list[y][x].innerHTML);
    }
    if (y == 0) {
      document.getElementById("total_footballers").innerHTML = sum;
      grand_sum += sum;
    } else if (y == 1) {
      document.getElementById("total_swimmers").innerHTML = sum;
      grand_sum += sum;
    } else if (y == 2) {
      document.getElementById("total_basketballers").innerHTML = sum;
      grand_sum += sum;
    }


  } //end for
  document.getElementById("grandtotal").innerHTML = grand_sum;


}

＆＃13;

#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
}

＆＃13;

<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" id="total_footballers"></td>
    <td class="tg-031e" id="total_swimmers"></td>
    <td class="tg-yw4l" id="total_basketballers"></td>
    <td class="tg-yw4l" id="grandtotal"></td>
  </tr>
</table>

＆＃13;

JS如何计算表中行的值？

2 个答案: