1

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

      });

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

在此处输入图像描述

4

2 回答 2

1

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

$("tr").each(函数(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 页面中是唯一的）。

于 2012-09-12T11:16:45.860 回答
1

或者你可以测试一下：

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

于 2012-09-12T11:59:26.123 回答