常用代码-03-JZTXT

选中表格当前行：

代码：

$("body").on("click", "table > tr > td:nth-child(4)", function () {
    let currentRow = $(this).closest("tr");
    let currentRowtd01 = currentRow.find("td:eq(0)").text();
    let currentRowtd02 = currentRow.find("td:eq(1)").text();
    let currentRowtd03 = currentRow.find("td:eq(2)").text();
});

View Code

控制表格整体水平居中采用弹性布局

代码：

    /* product为该表格父元素 */
    #product {
        display: flex;
        justify-content: center;
    }

View Code

设置表格的表头或单元格内容对齐方式

代码：

    th {
        text-align: left;
        vertical-align: top;
    }

    td {
        text-align: left;
        vertical-align: bottom;
    }

View Code

选中表格某一行或列

代码：

    /* 选中某行 */
    tr:first-child {
        background-color: greenyellow;
    }

    tr:nth-child(3) {
        background-color: greenyellow;
    }

    tr:last-child {
        background-color: greenyellow;
    }

    /* 选中某列 */
    th:first-child,
    td:first-child {
        background-color: aqua;
    }

    th:nth-child(3),
    td:nth-child(3) {
        background-color: aqua;
    }

    th:last-child,
    td:last-child {
        background-color: aqua;
    }

View Code

选中表格奇数偶数行

代码：

    /* 除表头外的偶数行 */
    tr:nth-child(1)~tr:nth-child(even) {
        background-color: red;
    }

    /* 除表头外的奇数行 */
    tr:nth-child(1)~tr:nth-child(odd) {
        background-color: green;
    }

View Code