Question

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

<html>
    <head>
        <script src="jquery-1.11.1.min.js"></script>
    </head>
    <body>
        <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'),
                    total = 0,
                    sp = 0,
                    ap = 0,
                    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>
    </body>
</html>

Answer 1

这种遍历/矩阵数学运算（或按键的简单计数）并非如此简单。你说你是编程新手，所以我用一些基本的javascript技术做了一个实现。此外，我更新了您的html以使用一些data-属性，只是为了允许进一步的自定义。

HTML

    <html>
    <head><script src="jquery-1.11.1.min.js"></script></head>
    <body>
    <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="" data-class="Sem I Honours" data-day="MON"><option></option><option      id="">SP</option><option  id="">AP</option><option id="">Guest</option></select>  </td>

      <td align="center"><select  id=""  onchange="" data-class="Sem I Honours" data-day="TUE"><option></option>
     <option id="">SP</option><option id="">AP</option><option    id="">Guest</option>
      </select></td>

      <td>
      Total:<span class="cnt-total" data-class="Sem I Honours" data-key="any" data-day="any">0</span><br/>
      SP:<span class="cnt-total" data-class="Sem I Honours" data-key="SP" data-day="any">0</span><br/>
      AP: <span class="cnt-total" data-class="Sem I Honours" data-key="AP" data-day="any">0</span><br/>
      Guest: <span class="cnt-total" data-class="Sem I Honours" data-key="Guest" data-day="any">0</span></td></tr>


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

    <td align="center"><select   id="" onchange="" data-class="Sem III Honours" data-day="TUE"><option></option><option   id="">SP</option><option id="">AP</option><option id="">Guest</option></select>  </td>

     <td>
     Total:<span class="cnt-total" data-class="Sem III Honours" data-key="any" data-day="any">0</span><br/>
     SP:<span class="cnt-total" data-class="Sem III Honours" data-key="SP" data-day="any">0</span><br/>
     AP: <span class="cnt-total" data-class="Sem III Honours" data-key="AP" data-day="any">0</span><br/>
     Guest: <span class="cnt-total" data-class="Sem III Honours" data-key="Guest" data-day="any">0</span>
     </td>
     </tr>

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


    <td>
    Total:<span class="cnt-total" data-class="any" data-key="any" data-day="MON">0</span><br/>
    SP:<span class="cnt-total" data-class="any" data-key="SP" data-day="MON">0</span><br/>
    AP: <span class="cnt-total" data-class="any" data-key="AP" data-day="MON">0</span><br/>
    Guest: <span class="cnt-total" data-class="any" data-key="Guest" data-day="MON">0</span>
    </td>

    <td>
    Total:<span class="cnt-total" data-class="any" data-key="any" data-day="TUE">0</span><br/>
    SP:<span class="cnt-total" data-class="any" data-key="SP" data-day="TUE">0</span><br/>
    AP: <span class="cnt-total" data-class="any" data-key="AP" data-day="TUE">0</span><br/>
    Guest: <span class="cnt-total" data-class="any" data-key="Guest" data-day="TUE">0</span>
    </td>

    <td>
    Total:<span class="cnt-total" data-class="any" data-key="any" data-day="any">0</span><br/>
    SP:<span class="cnt-total" data-class="any" data-key="SP" data-day="any">0</span><br/>
    AP: <span class="cnt-total" data-class="any" data-key="AP" data-day="any">0</span><br/>
    Guest: <span class="cnt-total" data-class="any" data-key="Guest" data-day="any">0</span>
    </td>

     </tr>

    </table>

<script><!-- script here --></script>
</body>
</html>

的Javascript

<script>

(function() {


    var data = {};

    function resetData() {
        data = {};
    }

    function updateDataFromSelects() {
        resetData();
        $('select').each(function() {       
            var this_class = $(this).attr("data-class");
            var this_day = $(this).attr('data-day');
            if (typeof data[this_class] === "undefined") data[this_class] = {};
             data[this_class][this_day] = $(this).val();
        });
        updateTotals();
    }

    function updateTotals() {

        $('span.cnt-total').each(function() {
            var this_key = $(this).attr('data-key');
            var this_day = $(this).attr('data-day');
            var this_class = $(this).attr('data-class');

            $(this).text(totalByKey(this_class, this_day, this_key));

        });



    }

    function totalByKey(_class,_day, _key) {
        var count = 0;
        for (class_key in data) {
            if (class_key === _class || _class === "any") {
                for (day_key in data[class_key]) {
                    if (day_key === _day || _day === "any") {
                        var key = data[class_key][day_key];
                        if (key.length === 0) continue;
                        if (key === _key || _key === "any") count++;
                    }
                }
            }
        }
        return count;
    }


    function bind() {

        $('select').change(function() {
            updateDataFromSelects();
        });


    }

    $(document).ready(function() {
        bind();
        updateDataFromSelects();
    });


})();


</script>

Answer 2

在所有选择中将文本option复制到value属性，并且您的js脚本应该可以正常工作

<select id="" onchange="" >
    <option></option>
    <option value="SP">SP</option>
    <option value="AP">AP</option>
    <option value="Guest">Guest</option>
</select>

JS

function calcTable(){
    var $table = $('table');

  var sum = function($select, obj) {
    if($select.val() == 'SP') { obj.total++ }
    if($select.val() == 'AP') { obj.total++ }
    if($select.val() == 'Guest') { obj.total++ }
    if($select.val() == 'SP') { obj.sp++; }
    if($select.val() == 'AP') { obj.ap++; }
    if($select.val() == 'Guest') { obj.guest++; }

    return obj;
  };

  var res = function($selector, obj){
    if(obj == undefined) return;

    $selector.find('.cnt-total').text(obj.total);
    $selector.find('.cnt-sp').text(obj.sp);
    $selector.find('.cnt-ap').text(obj.ap);
    $selector.find('.cnt-guest').text(obj.guest);
  };

  var count_cols = $table.find('tr:eq(1) td').length,
    count_rows = $table.find('tr').length;
    cols = [],
    rows = [];

  for(var row = 1; row < count_rows-1; row++){
    for(var col = 1; col < count_cols-1; col++){
        var cell = $table.find('tr:eq('+row+') td:eq('+col+')'),
        $select = cell.find('select');
      if(!rows[row]){
        rows[row] = { total: 0, sp: 0, ap: 0, guest: 0 };
      }
      if(!cols[col]){
        cols[col] = { total: 0, sp: 0, ap: 0, guest: 0 };
      }

      if($select.length){
        cols[col] = sum($select, cols[col]);
        rows[row] = sum($select, rows[row]);
      }
    }
  }

  $table.find('tr:eq(' + (count_rows-1) + ') td').each(function(i, td){
    res($(td), cols[i]);
  });

  $table.find('tr').each(function(i, tr){
    res($(tr).find('td:eq('+(count_cols-1)+')'), rows[i]);
  });

  //all
  var all = { total: 0, sp: 0, ap: 0, guest: 0 };
  for(var i in rows){
    all.total +=rows[i].total;
    all.sp +=rows[i].sp;
    all.ap +=rows[i].ap;
    all.guest +=rows[i].guest;
  }

  res($table.find('tr:eq('+(count_rows-1)+') td:eq('+(count_cols-1)+')'), all);
}

$('select').change(function() {
    calcTable();
});

JSFiddle

Answer 3

First you have to identify Display Result <td> like FirstSem , SecoundSem ,Total by class

For Sem I Honours Total Display...

<td class="Sem_first">
                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>

Sem III Honours Total Display...

<td class="Sem_Secound">
                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>

For total....

<td class="Sem_first">
                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 class="Sem_Secound">
                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 class="total">
                <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>

not Also give class to each drop down

This is for first

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

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

This is for secound ... 

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

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

Now Change is javascript...

 var allSelects = $(this)

if($(this).attr("class") == "Sem_1"){
                // For First Sem Row & column
                $(".Sem_first .cnt-total").text(total);
                $(".Sem_first .cnt-sp").text(sp);
                $(".Sem_first .cnt-ap").text(ap);
                $(".Sem_first .cnt-guest").text(guest);

            }
            if($(this).attr("class") == "Sem_2"){

                //For seound sem Row & column
                $(".Sem_Secound .cnt-total").text(total);
                $(".Sem_Secound .cnt-sp").text(sp);
                $(".Sem_Secound .cnt-ap").text(ap);
                $(".Sem_Secound .cnt-guest").text(guest);
            }      

            //For total

            $(".total .cnt-total").text(total);
            $(".total .cnt-sp").text(sp);
            $(".total .cnt-ap").text(ap);
            $(".total .cnt-guest").text(guest);



And comment your code ....

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

....这是完整的代码......

<强> JS

 <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<强> 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 id="" onchange="" class="Sem_1" >
                    <option></option>
                    <option id="">SP</option>
                    <option id="">AP</option>
                    <option id="">Guest</option>
                </select>
            </td>

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

            <td class="Sem_first">
                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="" class="Sem_2" >
                    <option></option>
                    <option value="SP">SP</option>
                    <option value="AP">AP</option>
                    <option value="Guest">Guest</option>
                </select>
            </td>

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

            <td class="Sem_Secound">
                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 class="Sem_first">
                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 class="Sem_Secound">
                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 class="total">
                <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>

<强> JAVASCRIPT

$('select').change(function() {
            // get all selects
            var allSelects = $(this),
                total = 0,
                sp = 0,
                ap = 0,
                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
            if($(this).attr("class") == "Sem_1"){
                // For First Sem Row & column
                $(".Sem_first .cnt-total").text(total);
                $(".Sem_first .cnt-sp").text(sp);
                $(".Sem_first .cnt-ap").text(ap);
                $(".Sem_first .cnt-guest").text(guest);

            }
            if($(this).attr("class") == "Sem_2"){

                //For seound sem Row & column
                $(".Sem_Secound .cnt-total").text(total);
                $(".Sem_Secound .cnt-sp").text(sp);
                $(".Sem_Secound .cnt-ap").text(ap);
                $(".Sem_Secound .cnt-guest").text(guest);
            }      

            //For total

            $(".total .cnt-total").text(total);
            $(".total .cnt-sp").text(sp);
            $(".total .cnt-ap").text(ap);
            $(".total .cnt-guest").text(guest);

        });

Answer 4

我的解决方案没有你的html你的html（除了你的一些语法错误）：

<强> HTML

 <table>

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

<强> JAVASCRIPT

var table = $("table")[0];

$('select').change(function() {
var row_index = $(this).parent().parent().index();
var col_index = $(this).parent().index();


var cell = table.rows[2].cells[1];
console.log(cell.id);

// get all selects
var allSelects = $('select');

// set values count by type
var totalx = 0;
var spx = 0;
var apx = 0;
var guestx = 0;

var totaly = 0;
var spy = 0;
var apy = 0;
var guesty = 0;

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 cur_x = $(this).parent().parent().index();
    var cur_y = $(this).parent().index();

    if (cur_x == row_index) {
      if($(s).val() == 'SP') { totalx++ }
      if($(s).val() == 'AP') { totalx++ }
      if($(s).val() == 'Guest') { totalx++ }
      if($(s).val() == 'SP') { spx++; }
      if($(s).val() == 'AP') { apx++; }
      if($(s).val() == 'Guest') { guestx++; }
    }
    if (cur_y == col_index) {
       if($(s).val() == 'SP') { totaly++ }
      if($(s).val() == 'AP') { totaly++ }
      if($(s).val() == 'Guest') { totaly++ }
      if($(s).val() == 'SP') { spy++; }
      if($(s).val() == 'AP') { apy++; }
      if($(s).val() == 'Guest') { guesty++; }
    }

      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
$(table.rows[2].cells[col_index]).find(".cnt-total").text(totaly);
$(table.rows[row_index].cells[3]).find(".cnt-total").text(totalx);

$(table.rows[2].cells[col_index]).find(".cnt-sp").text(spy);
$(table.rows[row_index].cells[3]).find(".cnt-sp").text(spx);

$(table.rows[2].cells[col_index]).find(".cnt-ap").text(apy);
$(table.rows[row_index].cells[3]).find(".cnt-ap").text(apx);

$(table.rows[2].cells[col_index]).find(".cnt-guest").text(guesty);
$(table.rows[row_index].cells[3]).find(".cnt-guest").text(guestx);

$(table.rows[2].cells[3]).find(".cnt-total").text(total);
$(table.rows[2].cells[3]).find(".cnt-sp").text(sp);
$(table.rows[2].cells[3]).find(".cnt-ap").text(ap);
$(table.rows[2].cells[3]).find(".cnt-guest").text(guest);



});

现场演示的JSFiddle

j-query函数更新值onchange

4 个答案:

HTML

的Javascript