Question

我是编程世界的新手。我编写了以下代码来计算每个教师的班级数和班级总数。但是代码没有给出期望的结果。特定行或列中的任何更改都应仅影响该行或列。只有东南角的方框才会受到任何地方变化的影响。但在目前的代码中，一个变化会影响所有。怎么解决？

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

Answer 1

你犯了一些html错误，所以试试这个 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);


        });

jQuery函数更新值onchange

1 个答案: