Jquery - Gridview - 交替行颜色

时间:2016-03-02 20:06:52

标签: jquery css asp.net gridview

我有一个带有交替行颜色的网格视图。

enter image description here

如果你双击它为空的网格 - >它会变为绿色并添加文字MI - >如果你双击Green MI - >它应该回到以前的状态(原始状态为空文本,背景颜色相同)

现在一切正常,除非我点击奇数行而不是蓝色它会变成白色。

我目前的代码是

                $('#MainContent_GVTest>tbody>tr>td').dblclick(function (e) {

                var selTD = $(e.target).closest("td");

                var selTR = $(e.target).closest("tr");

                 if (($.trim($currentCellText) == "MI") && $(selTD).attr('class') == "firsttime") {
                    selTD.text("");
                    selTD.addClass("NoClass");

                   }
        }); // This is working as expected

我想根据偶数行/奇数行添加更多逻辑以获得正确的背景颜色。类似下面的东西。但它没有用。我该如何解决?

                       if ($(selTD).is(":even")) {
                        alert('Even****************')
                         selTD.addClass("NoClass");
                        }
                    if ($(selTD).is(":odd")) {
                        alert('Odd****************')
                        selTD.addClass("NoClassOddrow");
                    }



                         .NoClass
                            {
                              background-color: white;
                                 }

                              .NoClassOddrow
                                 {
                                  background-color:blue;
                                      }

我更新了代码。当我将代码更新到上面时,我双击第一个蓝色单元格我得到警告说奇数,将颜色更改为蓝色

但是当我再次点击下面的行时,它会警告Odd并将颜色更改为蓝色。

1 个答案:

答案 0 :(得分:0)

我认为你有一个叫NoClass的课很奇怪。如果我是你,我会创建一个用于突出奇数和偶数行的类。

这样的事情:

#MainContent_GVTest tr:nth-child(even) td.highlight { background-color:green; }

#MainContent_GVTest tr:nth-child(odd) td.highlight { background-color:red; }

然后你可以在这样的javascript中切换那个类:

$('#MainContent_GVTest>tbody>tr>td').dblclick(function (e) {
     $(this).toggleClass('highlight');
});