我想更改 HTML 表格中偶數行的背景顏色。當我有一個具有已知列名和一個v-for用于行的表時，這是有效的，但現在我有未知的列和行，所以我必須做一個雙倍v-for，我不能用我以前的方法完成它。
HTML：
<template>
<table class="tbl" ref="thisTable">
<thead>
<tr>
<th v-for="columnName in tableData.columnsNames"> {{Object.values(columnName)[0]}} </th>
</tr>
</thead>
<tbody v-for="row in tableData.rows">
<tr>
<td v-for="colName in tableData.columnsNames">{{ row[Object.keys(colName)[0]] }}</td>
</tr>
</tbody>
</table>
</template>
CSS
<style scoped>
.tbl {
border-collapse: collapse;
margin: 20px 0 0 20px;
font-size: 1em;
font-family: Poppins;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.tbl thead tr {
background-color: #980000;
color: #ffffff;
text-align: left;
}
.tbl th,
.tbl td {
padding: 6px 10px;
text-align: center;
}
.tbl tbody tr {
border-bottom: 1px solid #dddddd;
}
.tbl tbody tr:nth-child(even) {
background-color: #f3f3f3;
}
</style>
tableData結構體：
{'columnsNames': [{"field1: "Field 1"}, {"field2: "Field 2"}], 'rows': [{"field1: "data11", "field2:"data12"}, {"field1: "data21", "field2:"data22"}]}
uj5u.com熱心網友回復：
您可以嘗試使用 js 而不是 css：
new Vue({
el: "#demo",
data() {
return {
tableData: {'columnsNames': [{"field1": "Field 1"}, {"field2": "Field 2"}, {"field3": "Field 3"}, {"field4": "Field 4"}], 'rows': [{"field1": "data11", "field2":"data12", "field3":"data13", "field4":"data14"}, {"field1": "data21", "field2":"data22", "field3": "data23", "field4":"data24"},]}
}
},
methods: {
// ?? find out if index of row is even
isEven(num) {
return (num % 2) == 0;
}
}
}).tbl {
border-collapse: collapse;
margin: 20px 0 0 20px;
font-size: 1em;
font-family: Poppins;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.tbl thead tr {
background-color: #980000;
color: #ffffff;
text-align: left;
}
.tbl th,
.tbl td {
padding: 6px 10px;
text-align: center;
}
.tbl tbody tr {
border-bottom: 1px solid #dddddd;
}
.even {
background-color: #f3f3f3;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table class="tbl" ref="thisTable">
<thead>
<tr>
<th v-for="(columnName, i) in tableData.columnsNames" :key="i"> {{Object.values(columnName)[0]}} </th>
</tr>
</thead>
<tbody v-for="(row, idx) in tableData.rows" :key="idx">
<tr>
<!-- ?? call method and attach class -->
<td :class="!isEven(idx) ? 'even' : ''" v-for="(colName, i) in tableData.columnsNames" :key="i">{{ row[Object.keys(colName)[0]] }}</td>
</tr>
</tbody>
</table>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447912.html
標籤：javascript html css Vue.js Vuejs2
上一篇：如何將浮動標簽添加到文本區域？