Getting extra blank rows from appending HTML..?

[BillInKCMo]

Making a fetch call and getting html back, like so:

<tr>
    <td class="heading">JGServices</td>
    <td class="numeric-amount">
        <input type="text" size=10 value="99.00" onfocus="this.blur()">
    </td>
<tr>
<tr>
    <td class="heading">ShippingHandling</td>
    <td class="numeric-amount">
        <input type="text" size=10 value="25.00" onfocus="this.blur()">
    </td>
<tr>
<tr>
    <td class="heading">District</td>
    <td class="numeric-amount">
        <input type="text" size=10 value="123.00" onfocus="this.blur()">
    </td>
<tr>
<tr>
    <td class="heading">Penalty</td>
    <td class="numeric-amount">
        <input type="text" size=10 value="250.00" onfocus="this.blur()">
    </td>
<tr>

...then using javascript to append it to the TBODY tag of the relevant table. I've tried two ways:

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;

...and...

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
t.insertAdjacentHTML('beforeend', data);

And in both cases, the browser renders it like this:

<tr>
    <td class="heading">JGServices</td>
    <td class="numeric-amount">
        <input type="text" size="10" value="99.00" onfocus="this.blur()">
    </td>
</tr>
<tr></tr>
<tr>
    <td class="heading">ShippingHandling</td>
    <td class="numeric-amount">
        <input type="text" size="10" value="25.00" onfocus="this.blur()">
    </td>
</tr>
<tr></tr>
<tr>
    <td class="heading">District</td>
    <td class="numeric-amount">
        <input type="text" size="10" value="123.00" onfocus="this.blur()">
    </td>
</tr>
<tr></tr>
<tr>
    <td class="heading">Penalty</td>
    <td class="numeric-amount">
        <input type="text" size="10" value="250.00" onfocus="this.blur()">
    </td>
</tr>

<tr></tr>

I can't figure out why or how to stop the extra, empty rows from appearing. Anyone have any ideas?

- Bill

Measure with a micrometer. Mark with a crayon. Cut with an ax.

 

[VBService]

Did you check what kind of data you're receive? Maybe this extra rows (<tr></tr>) come from server via fetch

const response = await fetch(...);
const data = await response.text();
console.log(data); // check in console what is exactly display, raw data

let T = document.getElementById('tblFees');
let t = T.querySelector('tbody');
let ih = t.innerHTML;
ih += data;
t.innerHTML = ih;

BTW

const t = document.querySelector('#tblFees tbody');
t.innerHTML += data;

// or
document.querySelector('#tblFees tbody').innerHTML += data;

alternatively

const t = document.querySelector('#tblFees tbody');
t.innerHTML += data.replaceAll('<tr></tr>', '').replaceAll(/^\s*[\r\n]/gm, '');

BTW

<input type="text" size="10" value="99.00" onfocus="this.blur()">

to

<input type="text" size="10" value="99.00" readonly>

 

[BillInKCMo]

The data I'm receiving from the server is correctly formatted HTML as it shows in the first example. The entra empty rows are only coming after the browser renders it.

Having textboxes there makes matching the formatting on the rest of the (huge) form easier: I forgot about the readonly attribute, but given my users, it's not helpful in any case. With readonly, the value can still be selected, and then my users will blow up my inbox wanting to know why it won't save.