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.

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.

• javascript
• jquery
• html-table

• 2 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 Commented yesterday
• Yes, it's possible. JS supports DOM manipulations, including creation of new elements. – PM 77-1 Commented yesterday
• 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 Commented yesterday

1 Answer 1

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

1. Loop over the <tr> elements
2. 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/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.