选中表格当前行:
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$("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
控制表格整体水平居中采用弹性布局
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* product为该表格父元素 */ #product { display: flex; justify-content: center; }View Code
设置表格的表头或单元格内容对齐方式
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
th { text-align: left; vertical-align: top; } td { text-align: left; vertical-align: bottom; }View Code
选中表格某一行或列
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 选中某行 */ 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
选中表格奇数偶数行
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 除表头外的偶数行 */ tr:nth-child(1)~tr:nth-child(even) { background-color: red; } /* 除表头外的奇数行 */ tr:nth-child(1)~tr:nth-child(odd) { background-color: green; }View Code
标签:03,常用,color,代码,tr,nth,background,child,td From: https://www.cnblogs.com/Sealgost/p/snippets03.html