table表格的相关设置(边框合并、隔行变色、添加内边框、单独设置某一列)

来源:互联网 发布:淘宝怎么设置店铺简介 编辑:程序博客网 时间:2024/05/19 17:11

1、为table表格设置边框合并

table{
    border-collapse:collapse;
    border-spacing:0;
}

2、隔行变色和添加内边框
function addColor() {
    var tbodyTrList = $(".table tbody tr");
    var tdList = $(".table td");
    for (var i = 0; i < tbodyTrList.length; i++) {
        if (i % 2 == 0) {
            tbodyTrList[i].className = "color";//隔行变色
        }
    }
    for (var j = 0; j < tdList.length; j++) {
        if (j % 6 != 0) {
            $(tdList[j]).addClass("border-left");//除第一列以外添加左边框
        }
    }
}

addColor();

3、单独设置每一列的样式

<script>
        $(document).ready(function () {
            var obj;
            $("tbody tr").each(function () {               
                $(this).find("td:nth-child(2)").first().css({"width":"360px"});//设置第二列宽度
                obj = $(this).find("td:nth-child(3)");//设置第三列
                if($(obj).html()!="0"){//值不是0的加粗
                    $(obj).css({"font-weight":"bold"});
                }
            });
        });

</script>

原创粉丝点击