jQuery-Funktion zum update Wert onchange

Ich bin sehr neu in der Programmierwelt. Ich habe den folgenden Code geschrieben, um die Anzahl der Klassen pro Fakultät und die Gesamtzahl der Klassen zu berechnen. Aber der Code gibt nicht das gewünschte Ergebnis. Jede Änderung in einer bestimmten Zeile oder Spalte sollte nur diese Zeile oder Spalte betreffen. Nur die Kiste in der Süd-Ost-Ecke wird durch Änderung in irgendeinem wo bewirkt. Aber im vorliegenden Code wirkt sich eine Änderung auf alle aus. Wie man es repariert?jQuery-Funktion zum update Wert onchange

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

Quelle

2016-06-17 Anonymous

Können Sie tun, eine schnelle jsFiddle pls –

-1

Sie einige HTML Fehler gemacht, so versuchen Sie dieses 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); 


     });

Quelle

2016-06-17 07:04:58

jQuery-Funktion zum update Wert onchange

Antwort

Verwandte Themen