功能：jq隔行换色

悬赏园豆：100 [已解决问题] 解决于 2016-06-02 12:21

table 中的行数合并 rowspan为2 怎么写这个脚本

#~~~# | 初学一级 | 园豆：112
提问于：2016-06-02 10:37

< >

最佳答案

到底是合并还是隔行变色？

隔行变色的话，直接css就能搞定。

收获园豆：100

幻天芒 | 高人七级 |园豆：37175 | 2016-06-02 12:03

功能是变色，，，，有的td是合并的，合并的td用一个颜色

#~~~# | 园豆：112 (初学一级) | 2016-06-02 12:05

#~~~# | 园豆：112 (初学一级) | 2016-06-02 12:06

@#~~~#: 把背景色设置在row上，不用关心合并的问题。

幻天芒 | 园豆：37175 (高人七级) | 2016-06-02 12:06

@幻天芒: 哦，明白你的意思了。

幻天芒 | 园豆：37175 (高人七级) | 2016-06-02 12:07

@幻天芒: 单纯的隔行换色是这样

#~~~# | 园豆：112 (初学一级) | 2016-06-02 12:07

即使把背景色设置在row上，，但还是不能解决隔行换色

#~~~# | 园豆：112 (初学一级) | 2016-06-02 12:09

@#~~~#:

<table id="test">
        <tr>
            <td rowspan="2">1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td rowspan="3">1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
    <script>
    var $t = $('#test');
    var $trs = $t.find('tr');
    var n = 0;
    var currentColor = 'red';
    for (var i = 0; i < $trs.length; i++) {
        var $tr = $($trs[i]);
        if (n === 0) {
            n = $tr.find('td:eq(0)').attr('rowspan') || 1;
        }
        $tr.css('background', currentColor);
        n--;
        if (n === 0) {
            currentColor = currentColor === 'red' ? 'blue' : 'red';
        }
    }
    </script>

//仅供参考。

幻天芒 | 园豆：37175 (高人七级) | 2016-06-02 12:18

@#~~~#: 多谢大神，，圆点供上

#~~~# | 园豆：112 (初学一级) | 2016-06-02 12:20

其他回答(1)

在readty的时候执行这2个代码给行

table的class 为 tbl_tr_filter 的打上标记 even 和odd

 Tbl_tr_filter_Init: function () {
                $(".tbl_tr_filter").each(
                    function () {
                        $(this).find(">tbody>tr:even").addClass("even");
                        $(this).find(">tbody>tr:odd").addClass("odd");
                        $(this).find(">tbody>tr:first").addClass("first");
                        $(this).find(">tbody>tr:last").addClass("last");
                    }
                );
    },
    Tbl_tr_td_filter_Init: function () {
        $(".tbl_tr_td_filter").each(
                function () {
                    $(this).find("tr").each(
                        function () {
                            $(this).children("td:even,th:even").addClass("even");
                            $(this).children("td:odd,th:odd").addClass("odd");
                            $(this).children("td:first,th:first").addClass("first");
                            $(this).children("td:last,th:last").addClass("last");
                        }
                    );
                }
            );
    },

然后在css里面对相关的class 写颜色

.tr_data.even > td { background-color: #fae9a6 !important; }
.tr_data.odd > td { background-color: #fef9e7 !important; }

小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2016-06-02 10:50

那个没有把合并的行进行一个判断呀

支持(0) 反对(0) #~~~# | 园豆：112 (初学一级) | 2016-06-02 10:53

@#~~~#:

这个只能写特例了根据 rowspan写特例原理和上面的代码一样你可以吧rowspan当做 class处理标记单双行

支持(0) 反对(0) 小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2016-06-02 10:55

@小眼睛老鼠: 不会呀，，大神

支持(0) 反对(0) #~~~# | 园豆：112 (初学一级) | 2016-06-02 11:02

$('tr').each(function (i, dom) {
var isRowSpan = $(this).is(function () {
return $('td[rowspan]', this).length > 0;
}
});
alert(isRowSpan);
for (var i = 0; i < $("#hejie tr").length; i++) {

if (isRowSpan = true) {
if ("上个列表的颜色白的") {
$(this).nextAll('tr:lt(' + (count - 1) + ')').css("background-color", "#f2f2f2");
i += 2;
} else {
$(this.rowIndex).css("background-color", "#fff");
i += 2;
}

} else {
if ("上个列表的颜色是白的") {
$(this).css("background-color", "#f2f2f2");
} else {
$(this).css("background-color", "#fff");

}
}
}

});

支持(0) 反对(0) #~~~# | 园豆：112 (初学一级) | 2016-06-02 11:02

@小眼睛老鼠: 这是我自己写的，，，很多问题

支持(0) 反对(0) #~~~# | 园豆：112 (初学一级) | 2016-06-02 11:03

@#~~~#: 我只做示范不帮忙写代码

支持(0) 反对(0) 小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2016-06-02 11:05

@小眼睛老鼠: 
$(function(){
    var i=0,j=0,k=0;
    $("#tableShow tr:gt(0)").each(function(){
        if(!$(this).find("td").eq(1).is(':hidden')){
            j=$(this).find("td:eq(1)").attr("rowspan");
        };
        i++;
        if(k%2==0){
            $(this).css("backgroundColor","yellow")
        };
        if(i==j){
            i=0;
            k++;
        };
         
    });
})

支持(0) 反对(0) #~~~# | 园豆：112 (初学一级) | 2016-06-02 11:07

@#~~~#: 我找到一个类似的案例他是这么写的，，帮忙看一下有什么问题？

支持(0) 反对(0) #~~~# | 园豆：112 (初学一级) | 2016-06-02 11:07

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

功能：jq隔行换色

欢迎，请先登录或者注册。