In Vue.js, is it possible to nest a <tr> tag inside another <tr> tag?

Question

In Vue.js, is it possible to nest a <tr> tag inside another <tr> tag?

I've been working on a dynamic table in vue.js, using the code snippet below:

<template>
    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}</td>
    </tr>

    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>{{item.items}}(future)</td>
    </tr>

    <tr class="left-align"  v-for="(item,index) in itemList" :key="index.id">
        <td>GAP</td>
    </tr>
</template>

However, the actual output doesn't match my expectations. The result looks like this:

https://i.sstatic.net/krUzg.png

I tried wrapping the table rows in one <tr> tag, but encountered an error:

<tr>
    <tr>
        <td>
        </td>
    </tr>

    <tr>
        <td>
        </td>
    </tr>
</tr>

The error message displayed was:

Parsing error: x-invalid-end-tag

javascript vue.js html-table vuejs2

Answer 1

Answer №1

To make your code more efficient, consider wrapping your tr elements with a tbody (or alternatively with a template tag) and using only one v-for:

<tbody v-for="(item,index) in itemList" :key="index">
    <tr class="left-align">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align">
        <td>GAP</td>
    </tr>
</tbody>

Answer 2

To make your code more efficient, consider wrapping your tr elements with a tbody (or alternatively with a template tag) and using only one v-for:

<tbody v-for="(item,index) in itemList" :key="index">
    <tr class="left-align">
        <td>{{item.items}}</td>
    </tr>
    <tr class="left-align">
        <td>{{item.items}}(future)</td>
    </tr>
    <tr class="left-align">
        <td>GAP</td>
    </tr>
</tbody>

Answer 3

Answer №2

When working with HTML, it is important to remember that nesting a tr inside another tr is not valid syntax. Instead, you can achieve the desired layout using a table structure.

<template>
  <td>
    <table>

<tr class="left-align" v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}</td>
</tr>
<tr class="left-align" v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}(future)</td>
</tr>
<tr class="left-align" v-for="(item,index) in itemList" :key="index.id">
    <td>GAP</td>
</tr>

    </table>
  </td>
</template>

The expected output should be structured as follows:

<tr>
  <td>
    <table>

<tr>
    <td>
    </td>
</tr>

<tr>
    <td>
    </td>
</tr>

    </table>
  </td>
</tr>

To ensure your HTML code is error-free, it is recommended to utilize an HTML validator like this one: HTML Validator. Valid HTML should not generate any errors or warnings. You can try copying and pasting the example below into the validator:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>sd</title>
</head>
<body>

<table>
<tr>
<td>
<table>
    <tr>
        <td>
            foo
        </td>
    </tr>

    <tr>
        <td>
            bar
        </td>
    </tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Answer 4

When working with HTML, it is important to remember that nesting a tr inside another tr is not valid syntax. Instead, you can achieve the desired layout using a table structure.

<template>
  <td>
    <table>

<tr class="left-align" v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}</td>
</tr>
<tr class="left-align" v-for="(item,index) in itemList" :key="index.id">
    <td>{{item.items}}(future)</td>
</tr>
<tr class="left-align" v-for="(item,index) in itemList" :key="index.id">
    <td>GAP</td>
</tr>

    </table>
  </td>
</template>

The expected output should be structured as follows:

<tr>
  <td>
    <table>

<tr>
    <td>
    </td>
</tr>

<tr>
    <td>
    </td>
</tr>

    </table>
  </td>
</tr>

To ensure your HTML code is error-free, it is recommended to utilize an HTML validator like this one: HTML Validator. Valid HTML should not generate any errors or warnings. You can try copying and pasting the example below into the validator:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>sd</title>
</head>
<body>

<table>
<tr>
<td>
<table>
    <tr>
        <td>
            foo
        </td>
    </tr>

    <tr>
        <td>
            bar
        </td>
    </tr>
</table>
</td>
</tr>
</table>

</body>
</html>

In Vue.js, is it possible to nest a <tr> tag inside another <tr> tag?

Answer №1

Answer №2

Similar questions

Issue: Attempting to access the property 'then' of an undefined entity causes a TypeError. However, the code executes

When integrating express with vue-router, I am encountering an issue with the '#' symbol in my URL

Avoid the default behavior when employing jQuery for Ajax requests

When onSucess is called within a Vue view, the metadata parameter returns undefined, whereas it works properly inside a

Gather keyboard information continuously

Troubleshooting: Issue with Vue transition mode not functioning properly with on-demand components

Am I making a mistake in my implementation of sending Socket.io messages to a designated room?

What is the best way to transfer information from a vue-resource function to the visual layer of a vue component?

javascript tabs not functioning as expected in HTML

``Look at that cool feature - a stationary header and footer that stay in place

The mistake in npm install is when the console logs a bug that is notorious for causing npm to malfunction

Using Selenium to Retrieve HTML Content Between Two Tags

React.js - Error message: onChange is not defined

Transmit and receive information between Javascript and Node.js through Express framework

Showing the Datepicker from jQuery right in the middle of the screen

Creating an AI adversary for a simple Tic Tac Toe game board: a step-by-step guide

Formulation, on the other side of the comma

Having trouble connecting DB and D3 using PHP. Struggling to follow D3noob's tutorial to completion

Vue-Resource fails to set Authorization header

Different ways to send data from JavaScript to Python using the 'POST' method