Javascript add new row with <tr> then remove at the last row

Question

I have simple question regarding table row.

Below is the example:

 var data = ['A', 'B', 'C', 'D', 'E']; for(var i=0; i<data.length; i++) { var element = ` <td>${i}</td><tr> `; console.log(element); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The result from console.log is:

<td>0</td><tr>
<td>1</td><tr>
<td>2</td><tr>
<td>3</td><tr>
<td>4</td><tr>

Now I need at the last row <td>4</td><tr> no need this <tr> . It should be like this <td>4</td> .

Is there any trick to handle it?

Answer 1

You can try this:

for(let i=0; i<data.length; i++) {
  let element = `<td>${i}</td>`;
  if (i !== data.length-1) {
    element += "<tr>";
  }
  console.log(element);
}