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:

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

Convert a JSON array into a new format

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

deployJava.js injects a new <embed> element into the header section of the webpage

Ways to develop a dynamic HTML TransferBox featuring a custom attribute

Place a new button at the bottom of the react-bootstrap-typeahead dropdown menu for additional functionality

Vue - Checkbox for selecting all items

What advantages does using an RxJS Subject have over handling multiple event listeners individually in terms of speed

Firestore is failing to accept incoming data when the setDoc method is employed

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

Having trouble removing just one element from an array in Redux. Any suggestions on how to make it work properly?

Incorporate Angular frontend into current website or project

Differences between JavaScript's window.onload and body.onload functionsWhen

Using React as a dependency for @vue/apollo-composable allows for seamless integration of Apollo

Learning about the functions Promise.all and Array.map()

Connect the Vue component to the Vue instance

What issues could potentially arise from utilizing the MIME type application/json?

The powerful combination of Ajax and Django creates a dynamic Like button

Children cannot access parent prop if the prop is null

What is the best way to calculate the width for each of the three elements in a row so that they all have 300px

The transition from Vuetify 2 to Vuetify 3 involves replacing deprecated properties like app, clipped-left, and offset-y with the new property called "