値を更新するjQuery関数

プログラミングの世界ではとても新しいです。私は教員1人あたりのクラス数とクラス数を計算するために次のコードを書いています。しかし、このコードでは望みの結果が得られません。特定の行または列の変更は、その行または列にのみ影響します。南東コーナーにあるボックスだけがどこで変更されても影響を受けません。しかし、現在のコードでは、1つの変更がすべて影響を与えます。それを修正するには？値を更新するjQuery関数

<html> 
<head><script src="jquery-1.11.1.min.js"></script></head> 

<table border="1" style="border-collapse:collapse" align="center"><caption><h3>Assign Teacher</h3></caption> 

<tr><th></th><th>MON</th><th>TUE</th><th>Total</th></tr> 

<tr><td><b>Sem I Honours</b></td><td align="center"><select id="" onchange="" ><option></option><option  id="">SP</option><option id="">AP</option><option id="">Guest</option></select> </td> 

    <td align="center"><select id="" onchange=""><option></option> 
<option id="">SP</option><option id="">AP</option><option id="">Guest</option> 
</select></td> 

<td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt- sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt- guest">0</span></td></tr> 


<tr><td><b>Sem III Honours</b></td> 
<td align="center"><select id="" onchange=""><option></option><option id="">SP</option><option id="">AP</option><option id="">Guest</option></select></td> 

<td align="center"><select id="" onchange=""><option></option><option id="">SP</option><option id="">AP</option><option id="">Guest</option></select></td> 

<td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></td></tr> 

<tr><td><b>Total</b></td> 


    <td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></td> 

<td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></td> 

<td><b>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></b></td></tr> 

</table> 


<script> 
$('select').change(function() { 
// get all selects 
var allSelects = $('select'); 

// set values count by type 
var total = 0; 
var sp = 0; 
var ap = 0; 
var guest = 0; 
// for each select increase count 
$.each(allSelects, function(i, s) { 
    // increase count 
    if($(s).val() == 'SP') { total++ } 
    if($(s).val() == 'AP') { total++ } 
    if($(s).val() == 'Guest') { total++ } 
    if($(s).val() == 'SP') { sp++; } 
    if($(s).val() == 'AP') { ap++; } 
    if($(s).val() == 'Guest') { guest++; } 
}); 

// update count values summary 
$('.cnt-total').text(total); 
$('.cnt-sp').text(sp); 
$('.cnt-ap').text(ap); 
$('.cnt-guest').text(guest); 


}); 
</script> 
</html>

出典

2016-06-17 Anonymous

あなたが迅速jsFiddleを行うことができますがpls –

-1

あなたは、いくつかのHTML誤りを犯したので、この1つの https://jsfiddle.net/3qsnu9sr/1/

HTML試してみてください。

<table border="1" style="border-collapse:collapse" align="center"> 
    <caption> 
     <h3>Assign Teacher</h3> 
    </caption> 
    <tr> 
     <th></th> 
     <th>MON</th> 
     <th>TUE</th> 
     <th>Total</th> 
    </tr> 
    <tr> 
     <td><b>Sem I Honours</b></td> 
     <td align="center"> 
      <select> 
       <option></option> 
       <option id="">SP</option> 
       <option id="">AP</option> 
       <option id="">Guest</option> 
      </select> 
     </td> 
     <td align="center"> 
      <select id="" onchange=""> 
       <option></option> 
       <option id="">SP</option> 
       <option id="">AP</option> 
       <option id="">Guest</option> 
      </select> 
     </td> 
     <td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></td> 
    </tr> 
    <tr> 
     <td><b>Sem III Honours</b></td> 
     <td align="center"> 
      <select> 
       <option></option> 
       <option id="">SP</option> 
       <option id="">AP</option> 
       <option id="">Guest</option> 
      </select> 
     </td> 
     <td align="center"> 
      <select> 
       <option></option> 
       <option id="">SP</option> 
       <option id="">AP</option> 
       <option id="">Guest</option> 
      </select> 
     </td> 
     <td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></td> 
    </tr> 
    <tr> 
     <td><b>Total</b></td> 
     <td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></td> 
     <td>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></td> 
     <td><b>Total:<span class="cnt-total">0</span><br/>SP:<span class="cnt-sp">0</span><br/>AP: <span class="cnt-ap">0</span><br/>Guest: <span class="cnt-guest">0</span></b></td> 
    </tr> 
</table>

JS：

 $('select').change(function() { 
// get all selects 
      var allSelects = $('select'); 

// set values count by type 
      var total = 0; 
      var sp = 0; 
      var ap = 0; 
      var guest = 0; 
// for each select increase count 
      $.each(allSelects, function (i, s) { 
       // increase count 
       var value = $(s).val(); 
       if (value == 'SP') { 
        total++ 
       } 
       if (value == 'AP') { 
        total++ 
       } 
       if (value == 'Guest') { 
        total++ 
       } 
       if (value == 'SP') { 
        sp++; 
       } 
       if (value == 'AP') { 
        ap++; 
       } 
       if (value == 'Guest') { 
        guest++; 
       } 
      }); 

// update count values summary 
      $('.cnt-total').text(total); 
      $('.cnt-sp').text(sp); 
      $('.cnt-ap').text(ap); 
      $('.cnt-guest').text(guest); 


     });

出典

2016-06-17 07:04:58

答えて

関連する問題