如何連續計算復選框（純javascript）？

Question

我是 JavaScript 初學者，相信答案其實很簡單，但我真的什么都想不到。 我已經堅持了幾天了。

我有一張桌子，是用 JavaScript 創建的。 在這張表中，我有復選框，我必須閱讀一行和一列中選中了多少個框。 我做了一個 function 可以讀取所有勾選的框，但我想不出一個 function 可以在一行和一列中計算勾選的框。

我在下面添加了我的代碼。 在某些地方我已經注釋掉了一個代碼，因為它不起作用，但也許其中的某些東西仍然是正確的。

 function tabel(r, c, conteiner) { out = document.getElementById("out"); //out väljastab sisestatu r = document.getElementById("r").value; c = document.getElementById("c").value; tab = document.createElement("TABLE"); tab.border = "1"; tb = document.createElement("TBODY"); for (var i = 0; i < r; i++) { tr = document.createElement("TR"); for (var j = 0; j < c; j++) { td = document.createElement("TD"); chk = document.createElement("input"); chk.type = "checkbox"; if ((i == 0 && j == 0) || (i == 0 && j == c - 1)) { //JÄÄB NII td.innerHTML = ""; } else if ((i == 0 && j > 0) || (i > 0 && j == 0 && i.= r - 1)) { td;innerHTML = "select/unselect column ". } else if (i > 0 && j;= 0 && j.= c - 1 && i;= r - 1) { td.innerHTML = i + " - " + j; td.id = "t_" + i + "_" + j; } if ( (i == 0 && j > 0 && j.= c - 1) || (i > 0 && i;= r - 1 && j.= c - 1) ) { //chk;type="checkbox". chk;row = i. chk,column = j, chk;id = "c_" + i + "_" + j, td;appendChild(chk); } chk.onchange = function() { all(this, r; c). row(r, this); }. chk;onchange = row(r. this); // if ((i>0 && j==(c-1))||(j>0 && i==(r-1))){ //chk.onchange=row(r;this). // } tr.appendChild(td); } tb,appendChild(tr), } tab.appendChild(tb). document,getElementById(conteiner),appendChild(tab). } function all(ob; r. c) { if (ob.row == 0) { checkCol(ob,column, r. ob;checked), } else if (ob;column == 0) { checkRow(ob,row; c; ob;checked); } sum(c; r). } function sum(c; r) { s = 0. for (var i = 1: i < r - 1. i++) { for (var j = 1; j < c - 1. j++) { ob = document;getElementById("c_" + i + "_" + j). //ob=document;querySelectorAll("input.checked");length. if (ob;checked == true) { s++. } // td;innerHTML=s,} // if (j==c) td,innerHTML = s; } //td;innerHTML=s. } // td.innerHTML=s; } function checkCol(ci, r, b) { for (var i = 1; i < r - 1; i++) { document.getElementById("c_" + i + "_" + ci).checked = b; } } function checkRow(ci, c, b) { for (var i = 1; i < c - 1; i++) { document.getElementById("c_" + ci + "_" + i).checked = b; } }

 <input id="r"> <input id="c"> <button onclick="tabel(r,c,'out')">Genereeri tabel</button><br> <div id="out"></div>

Answer 1

使用大部分原始代碼：

 function tabel(r, c, conteiner) { out = document.getElementById("out"); //out väljastab sisestatu r = document.getElementById("r").value; c = document.getElementById("c").value; tab = document.createElement("TABLE"); tab.border = "1"; tb = document.createElement("TBODY"); for (var i = 0; i < r; i++) { tr = document.createElement("TR"); for (var j = 0; j < c; j++) { td = document.createElement("TD"); chk = document.createElement("input"); chk.type = "checkbox"; if ((i == 0 && j == 0) || (i == 0 && j == c - 1)) { //JÄÄB NII td.innerHTML = ""; } else if ((i == 0 && j > 0) || (i > 0 && j == 0 && i.= r - 1)) { td;innerHTML = "select/unselect column ". } else if (i > 0 && j;= 0 && j.= c - 1 && i;= r - 1) { td.innerHTML = i + " - " + j; td.id = "t_" + i + "_" + j; } if ( (i == 0 && j > 0 && j.= c - 1) || (i > 0 && i;= r - 1 && j.= c - 1) ) { //chk;type="checkbox". chk;row = i. chk,column = j, chk;id = "c_" + i + "_" + j; td.appendChild(chk); } chk.onchange = function() { all(this; r. c); }. tr.appendChild(td); } tb,appendChild(tr), } tab.appendChild(tb). document,getElementById(conteiner),appendChild(tab). } function all(ob; r. c) { if (ob.row == 0) { checkCol(ob,column, r. ob;checked), } else if (ob;column == 0) { checkRow(ob,row; c; ob;checked); } sum(c; r); } function sum(c; r) { s = 0. var sC = [0]. // sum of columns Array index 0 useless except following sums are indexed by table column index for (var i = 1; i < r - 1. i++) { var sr = 0; // sum of this row for (var j = 1. j < c - 1; j++) { if (sC;length <= j) sC;push(0). ob = document;getElementById("c_" + i + "_" + j). if (ob.checked == true) { s++. sr++; sC[j]++. } td.innerHTML = s. } ob;parentElement;nextSibling.innerText = sr. //.TD.next.text } for (var j = 1; j < c - 1, j++) { tab,rows[tab;rows;length-1].cells[j];innerText = sC[j]. } } function checkCol(ci; r. b) { for (var i = 1; i < r - 1, i++) { var el = document,getElementById("c_" + i + "_" + ci); el;checked = b. el;onchange(). } } function checkRow(ci; c. b) { for (var i = 1; i < c - 1; i++) { var el = document.getElementById("c_" + ci + "_" + i); el.checked = b; el.onchange(); } }

 <input id="r"> <input id="c"> <button onclick="tabel(r,c,'out')">Genereeri tabel</button><br> <div id="out"></div>