JS如何計算表中的行值？

例如，有這樣一個表，與細胞FootballPlayers，游泳，BasketballPlayers和點心，其中行反過來，我怎麼能算並記錄添加總計行有多少足球運動員，游泳和籃球運動員加入在？JS如何計算表中的行值？

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

#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"> 
 
\t \t \t <label for="n">FootballPlayers: </label> 
 
\t \t \t <input type="text" id="f1" /> 
 
</div> 
 
<div class="row"> 
 
\t \t \t <label for="n">Swimmers: </label> 
 
\t \t \t <input type="text" id="f2" /> 
 
</div> 
 
\t <div class="row"> 
 
\t \t \t <label for="n">BasketballPlayers: </label> 
 
\t \t \t <input type="text" id="f3" /> 
 
\t \t \t <button id="a" onClick="addRow();return false;" >Add</button> 
 
\t \t \t <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>

來源

2017-04-11 Dany

下面是一個例子，只有總FootballPlayers 步驟1） 添加類FootballPlayers列時添加行 步驟2） 呼叫總（） 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>

來源

2017-04-11 04:21:34

到你的細胞和IDS添加類爲每個總列在表中，執行以下

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; 
 

 

 
}

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

如下

片段

來源

2017-04-11 04:39:07 repzero

JS如何計算表中的行值？

回答

相關問題