Is it possible to populate a table with missing <td> tags using jquery?

Question

I have the following table, with two <td>---</td>

<table>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>---</td>
    <td>---</td>
  </tr>
</table>

What I'm looking for is to detect if the tr has 3 td tags, in case it only has 2 or 1, the missing td tags are automatically added. For this example I only used 3 td for each tr, but I hope to be able to use more td. I don't know if it's possible, or if I explained myself correctly, but I hope someone can guide me.

It is unclear to me what exactly you are trying to achieve, or why you want to use jquery specifically? You can just give your table an id, and then in a js function query the document for it. Then you can query the rows on the result and do whatever with it. Or use a framework specific solution if any when working with those. — H3AR7B3A7
– H3AR7B3A7, Commented Feb 18 at 23:32
Yes, it's possible. JS supports DOM manipulations, including creation of new elements. — PM 77-1
– PM 77-1, Commented Feb 18 at 23:48
I want to add <td>---</td> using jQuery and not manually. As I show in the example, my second <tr> only has one <td> with information and 2 more without useful information. I would like it to detect how many <td> my <tr> has, and if there are 2 missing, in this case, they are added automatically. Why with JQuery? Because I find it easier to understand than traditional javascript. — 3Code
– 3Code, Commented Feb 19 at 0:00

Phil · Accepted Answer · 2025-02-19 00:23:29Z

Seems simple enough and you certainly don't need jQuery...

Loop over the <tr> elements
Append <td> elements to the count of 3 minus the current number of child elements.
- You could also make the 3 dynamic by detecting the largest number of columns in any particular row. If you had a table header this would be even easier

const maxColumns = Math.max(
  ...Array.from(
    document.querySelectorAll('tbody tr'),
    (tr) => tr.childElementCount,
  ),
);
console.log('Detected max columns:', maxColumns);

document.querySelectorAll('tbody tr').forEach((tr) => {
  tr.append(
    ...Array.from({ length: maxColumns - tr.childElementCount }, () =>
      Object.assign(document.createElement('td'), { textContent: '---' }),
    ),
  );
});

<table border="1">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
</table>

If you insist on a jQuery version, the equivalent would be...

$("tbody tr").append(function () {
  return Array.from({ length: 3 - this.childElementCount }, () =>
    $("<td>", { text: "---" }),
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
</table>

You can see it's basically the same as the plain JavaScript version so not sure why you'd bother with the bloat of jQuery.

Collectives™ on Stack Overflow

Is it possible to populate a table with missing <td> tags using jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related