Issue
I want to change the background color of even rows in a HTML table. This was working when I had a table with known column names and one v-for
for rows, but now I have unknown columns and rows so I have to do a double v-for
and I can't get it done with my previous approach.
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
structure:
{'columnsNames': [{"field1: "Field 1"}, {"field2: "Field 2"}], 'rows': [{"field1: "data11", "field2:"data12"}, {"field1: "data21", "field2:"data22"}]}
Solution
The problem is the outer v-for
was put on <tbody>
, so each row was rendered with a new <tbody>
:
<table class="tbl">
<thead>
<tr><th>Field 1</th><th>Field 2</th></tr>
</thead>
<tbody> <!-- row -->
<tr><td>data11</td><td>data12</td></tr>
</tbody>
<tbody> <!-- row -->
<tr><td>data21</td><td>data22</td></tr>
</tbody>
</table>
So tbody tr:nth-child(even)
would never match because each <tbody>
has only one <tr>
.
Solution
Put the outer v-for
on the <tr>
instead of <tbody>
:
<table>
<tbody>
👇
<tr v-for="row in tableData.rows">
<td v-for="colName in tableData.columnsNames">{{ row[Object.keys(colName)[0]] }}</td>
</tr>
</tbody>
</table>
Answered By - tony19
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.