Question

html中的表（mygrid）代码：

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="mygrid" 
                                                        rules="all">
        <tbody>
        <tr>
            <th scope="col">Nr de ord</th>
            <th scope="col" class="hideGridColumn">&nbsp;</th>
            <th scope="col" class="hideGridColumn">StudentId</th>
            <th scope="col">Numele Prenuele</th>
            <th scope="col">
                           <span id="mondayText">Luni<br></span>
            </th>
            <th scope="col">
                           <span id="thuesdayText">Marti<br></span>
                           <span id="thuesday">04.09.2012</span>
            </th>
            <th scope="col">
                           <span id="wednesdayText">Miercuri<br></span>
                           <span id="wednesday">05.09.2012</span>
            </th>
            <th scope="col">
                           <span id="thursdayText">Joi<br></span>
                           <span id="thursday">06.09.2012</span>
            </th>
            <th scope="col">
                           <span id="fridayText">Vineri<br></span>
                           <span id="friday">07.09.2012</span>
            </th>
            <th scope="col">
                           <span id="saturdayText">Simbata<br></span>
                           <span id="saturday">08.09.2012</span>
            </th>
            <th scope="col">
                           <span id="absM">Absente motivate</span>
            </th>
            <th scope="col">
                          <span id="absN">Absente nemotivate</span>
            </th>
        </tr>
        <tr>
            <td>1</td>
            <td class="hideGridColumn">9201001121311</td>
            <td class="hideGridColumn">120001</td>
            <td>asd asd asd</td>
            <td><select class="ddlJ" id="a1_0" 
                          name="ctl00$contentbody$mygrid$ctl02$a1">
                <option value="a">a</option>
                <option value="m" selected="selected">m</option>
                <option value="n">n</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <span id="totalM">1</span>
            </td>
            <td>
                <span id="totalN">0</span>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td class="hideGridColumn">9201001121311</td>
            <td class="hideGridColumn">120002</td>
            <td>test1  </td>
            <td><select class="ddlJ" id="a1_1" 
                          name="ctl00$contentbody$mygrid$ctl03$a1">
                <option value="a">a</option>
                <option value="m">m</option>
                <option value="n" selected="selected">n</option>
                </select>
            </td>
            <td></td>
            <td><select class="ddlJ" id="a111_1" 
                            name="ctl00$contentbody$mygrid$ctl03$a111">
                <option value="a">a</option>
                <option value="m" selected="selected">m</option>
                <option value="n">n</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td><span id="totalM">1</span>
            </td>
            <td><span id="totalN">0</span>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td class="hideGridColumn">9201001121311</td>
            <td class="hideGridColumn">120003</td>
            <td>test3  </td>
            <td><select class="ddlJ" id="a1_2" 
                            name="ctl00$contentbody$mygrid$ctl04$a1">
                <option value="a">a</option>
                <option value="m" selected="selected">m</option>
                <option value="n">n</option>
                </select>
            </td>
            <td></td>
            <td><select class="ddlJ" id="a111_2" 
                          name="ctl00$contentbody$mygrid$ctl04$a111">
                <option value="a">a</option>
                <option value="m">m</option>
                <option value="n" selected="selected">n</option>
                </select>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td><span id="totalM">0</span>
            </td>
            <td><span id="totalN">1</span>
            </td>
        </tr>
    </tbody></table>

当加载这个表（网格）时，我有一个函数来计算selectedIndex = 1或slectedIndex = 2的数量。

var collection = $('select.ddlJ');
console.log(collection);
            $.each(collection, function(key,value)

            {
                    console.log("key:"+key+"si value"+value);

                     var p = $(value).parent().parent();
                     p.find('td:last').prev().find('span').html(
                     p.find($(value)).filter(function () {
                     return $.trim($(value).get(0).selectedIndex) == 1;
                     }).length
                    );

                       p.find('td:last span').html(
                       p.find($(value)).filter(function () {
                       return $.trim($(value).get(0).selectedIndex) == 2;
                       }).length
                     );

      });

它有效，但计算错误，如果一行中有多个选择元素，结果只是最后一个选择元素的数字，如下图所示：

enter image description here

Answer 1

我想你想要对行中的所有选择元素求和。只是略微区别地看问题，循环遍历行而不是组合框：

$("tr").each(function(i, tr) {
  $(".totalM", tr).text($("select.ddlJ", tr).filter(function() { return this.value == "m"; }).length);
  $(".totalN", tr).text($("select.ddlJ", tr).filter(function() { return this.value == "n"; }).length);
});

顺便说一句，您要将totalM和totalN更改为类（因为ID在HTML页面中是唯一的）。

Answer 2

或者您可以测试一下：

var row = $('tr').not(':first');

$.each(row, function(key,value){
      var ind = '';
      $(value).find('select option:selected').each(function(){
          ind += $(this).index() + ' for ' + $(this).text() + ' ';
      });
    console.log('The index selected for current row are: ' +ind);
});

编辑：

要更改范围totalM和totalN文字，请将id="totalM"和id="totalN"更改为class="totalM"和class="totalN"（ID是唯一的; - ））

这是一种方式：

var row = $('tr').not(':first');

$.each(row, function(key,value){
       var m = 0;
       var n = 0;
       $(value).find('select option:selected').each(function(){
           if($(this).index() == 1) {
              m += 1;
           }else if($(this).index() == 2){
              n += 1;
           }              
       });
       $(value).find('.totalM').text(m);
       $(value).find('.totalN').text(n);
});

但你可以将上面的索引存储在一个数组中并使用它来填充总数，或者以其他方式存储文本，看看有多少m或n，依此类推......

FIDDLE

上的示例

Jquery：计算多个select元素的值

2 个答案: