How would you make a table row with an inner tr?

Help Requests
#1

This is probably more an HTML question, but my mind has gone blank.

Using div’s I have

<li class="list-group-item" repeat.for="item of contractList">
      <div class="row">
        <div class="col">${item.id}</div>
        <div class="col">${item.contractDate </div>
        <div class="col-2">${item.sellerName}/${item.buyerName}</div>
        etc.
      </div>

      <div class="row if.bind="item.status=='all">
            <div class="col">${item.shippedQuantity} </div>
      </div>
</li>

in other words I have two rows for each item

However, I need to convert this to a table, because I need to be able to copy and paste the table.

How do I get the second row??

I’ve tried

<tbody>
      <tr repeat.for="item of contractList">
        <td class="">${item.id}</td>
        <td class="">${item.contractDate</td>
        <td class="">${item.sellerName}/${item.buyerName}</td>
       etc

                     // second row????
                    // <tr><td>${item.shippedQuantity}</itd></tr>
                    //
    </tr>
</tbody>

This is what I’m trying to achieve

image
image1158×190 21 KB

1 Like
#2

The keyword is “containerless”, this could possibly help you:

2 Likes
#3

If I understand you correctly you want to do a repeat.for on the contractList but instead of a single row, have 2 rows?

I think this can be achieved by placing the repeat.for in a surrounding template tag.

<tbody>
   <template repeat.for="item of contractList">
      <tr>
        <td class="">${item.id}</td>
        <td class="">${item.contractDate}</td>
        <td class="">${item.sellerName}/${item.buyerName}</td>
      </tr>
      <tr>
        <td>${item.shippedQuantity}</td>
      </tr>
   <template>
</tbody>

I don’t think you need to specify the containerless keyword in the template tag.
Let me know if that works for you :slight_smile:

1 Like
#4

Thanks so much - that’s exactly what I needed. I’d seen this somewhere in the documentation but couldn’t find it.

1 Like
#5

I am a little confused. :no_mouth:

The example code in the documentation states that the provided solutions are considered illegal:

Illegal Table Code:

<template>
  <table>
    <template repeat.for="customer of customers">
      <tr>
        <td>${customer.fullName}</td>
      </tr>
    </template>
  </table>
</template>

Correct Table Code:

<template>
  <table>
    <tr repeat.for="customer of customers">
      <td>${customer.fullName}</td>
    </tr>
  </table>
</template>

But obviously, the “correct table code” provided in the documentation examples does not suffice for the issue at hand, which requires multiple table rows per collection item.

The solutions provided by @elitastic and @tristanh seem to be working fine, however. But my Visual Studio 2019 environment does complain about the fact that “element ‘tr’ cannot be nested inside element ‘template’”. However, these issues are raised as warnings instead of errors. So I suspected that it is not valid HTML indeed. A quick glance on the Technical Summary section in the documentation of the tr element on the Mozilla Developer Network confirmed this. So it works, but theoretically it seems to be invalid.

Adding or omitting the containerless attribute does not seem to have any effect here (neither functional nor regarding the warnings in VS2019).

So I am still quite curious about possible alternative solutions that do not involve nesting tr elements in a template element.

#6

The main problem here is IE 11, which does not support the template tag (especially in connection with html tables). For modern browsers the following code is totally fine:

<table>
	<template repeat.for="customer of customers">
	  <tr>
		<td>${customer.fullName}</td>
	  </tr>
	</template>
</table>

I solved this in my projects by repeating the tbody tag (where possible):

<table>
	<tbody repeat.for="customer of customers">
		<tr>
			<td>${customer.fullName}</td>
		</tr>
		<tr>
			<td>additional row</td>
		</tr>
	</tbody>
</table>
2 Likes
#7

Yes, using a template element works fine indeed. But it still remains a mystery to me why the tr element officially isn’t supposed to be used as a direct child in anything except a table, a thead, a tbody, or a tfoot element, even in other (evergreen) browsers. I guess that’s the reason why my VS2019 environment is warning about it. I can ignore it, but it remains an annoying issue.

Your solution regarding a repeating tbody element is great. Multiple tbody elements are supported just fine. The DOM also provides a tBodies property on the HTMLTableElement class, which I was not aware of until now. And it seems to have full browser support. So I consider this to be a valid solution (until I run into scenarios where it doesn’t work). Thank you very much. :slight_smile:

1 Like