Quiero cambiar el color de fondo de las filas pares en una tabla HTML. Esto funcionaba cuando tenía una tabla con nombres de columna conocidos y una v-for para las filas, pero ahora tengo columnas y filas desconocidas, así que tengo que hacer una doble v-for y no puedo hacerlo con mi enfoque anterior. .
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> estructura tableData :
{'columnsNames': [{"field1: "Field 1"}, {"field2: "Field 2"}], 'rows': [{"field1: "data11", "field2:"data12"}, {"field1: "data21", "field2:"data22"}]}El problema es que el v-for externo se colocó en <tbody> , por lo que cada fila se representó con un nuevo <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> Entonces tbody tr:nth-child(even) nunca coincidiría porque cada <tbody> tiene solo un <tr> .
Ponga el v-for externo en el <tr> en lugar de <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>Puedes probar con js en lugar de 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>