从jQuery Array向表行添加类

时间:2014-11-14 20:01:02

标签: jquery html5

我是jQuery的新手,但我想我离这里很近。我必须使用几个左外连接来显示SQL视图中的数据。因此,我想将第一个表行的类设置为特定的PK_DemographicsID为.master,其余行设置为与.detail相同的PK_DemographicsID。显然,我正在尝试为第一行下的每个PK_DemographicsID隐藏额外的行。

我被困在if-else,我正在尝试设置课程。任何帮助,将不胜感激。谢谢。

{ ...............
<tbody id="SearchTableBody">
  @foreach (var item in Model.DemographicsAllList)
  {
    <tr data-id={"pkid":"@item.PK_DemographicsID"}>.....</tr>
  }
</tbody>
}
<script type="text/javascript">
    $(function () {
        var rows_array = [];
        $('#SearchTableBody tr').each(function (i) {
            rows_array[i] = $(this);
        });
        var cpkid = 0;
        var opkid = 0;
        if (rows_array != undefined || rows_array != null) {
            var rowslen = rows_array.length;
            for (var i = -1, n = rowslen; ++i < n;) {
                var row = rows_array[i];
                cpkid = $(row).data('id').pkid;
                if (cpkid != opkid) {
                    // set table row class to .master
                }
                else {
                    // set table row class to .detail
                }
                opkid = cpkid;
            };
        };
    });
    $('.detail').hide();
    $("#SearchTableBody tr.master").click(function () {
        $(this).next("tr").toggle();
        $(this).find('span').text(function (_, value) {
            return value == '-' ? '+' : '-'
        });
    });
</script>

2 个答案:

答案 0 :(得分:0)

可能你可以试试这个

row.addClass("master");
row.addClass("detail");

希望这会有所帮助 快乐学习:)

答案 1 :(得分:0)

好的,所以这就是我最终发现的。我需要&#34;种子&#34;带有类的表行。在这种情况下,我只使用了class =&#34; t&#34;。它做了我需要它做的事情,它隐藏了具有重复主键的行。数据来自Lucene索引,该索引是使用具有多个左外连接的SQL视图创建的。因此,冗余数据是不可避免的,但现在它隐藏在组的第一行之下。

以下是视图中的代码:

{ ...............
<tbody id="SearchTableBody">
  @foreach (var item in Model.DemographicsAllList)
  {
    <tr class="t" data-id={"pkid":"@item.PK_DemographicsID"}>.....</tr>
  }
</tbody>
}


    <script type="text/javascript">
        $(function () {
            var rows_array = [];
            $('#SearchTableBody tr').each(function (i) {
                rows_array[i] = $(this);

            });
            var cpkid = 0;
            var opkid = 0;
            if (rows_array != undefined || rows_array != null) {
                var rowslen = rows_array.length;
                for (var i = -1, n = rowslen; ++i < n;) {
                    var row = rows_array[i];
                    cpkid = $(row).data('id').pkid;
                    if (cpkid != opkid) {
                        row.removeClass('t');
                        row.addClass('master');
                        var pkCount = count(rows_array, cpkid);
                        if (pkCount > 1) {
                            row.find('span').text(function (_, value) {
                                return value == '+' ? '+' : '-'
                            });
                        }
                        else {
                            row.find('span').text(function (_, value) {
                                return value == '+' ? '-' : '+'
                            });
                        };
                    }
                    else {
                        row.removeClass('t');
                        row.addClass('detail').find('span').text(function (_, value) {
                            return value == '-' ? '+' : '-'
                        });
                    }
                    opkid = cpkid;
                    //alert(cpkid + ' | ' + opkid);
                };
            };
            function count(array, value) {
                var counter = 0;
                for (var i = 0; i < array.length; i++) {
                    if (array[i].data('id').pkid === value) counter++;
                }
                return counter;
            };

            $('.detail').hide();
            $('#SearchTableBody tr.master').click(function () {
                $(this).nextUntil('tr.master').toggle();
            });
        });
</script>