Getting extra blank rows from appending HTML..?

Joined
Oct 24, 2023
Messages
2
Reaction score
0
Making a fetch call and getting html back, like so:

HTML:
<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:

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

...and...

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

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

HTML:
<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.
 
Joined
Jul 4, 2023
Messages
373
Reaction score
41
Did you check what kind of data you're receive? Maybe this extra rows (<tr></tr>) come from server via fetch
JavaScript:
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
JavaScript:
const t = document.querySelector('#tblFees tbody');
t.innerHTML += data;

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

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

BTW
HTML:
<input type="text" size="10" value="99.00" onfocus="this.blur()">
to
HTML:
<input type="text" size="10" value="99.00" readonly>
 
Last edited:
Joined
Oct 24, 2023
Messages
2
Reaction score
0
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,787
Messages
2,569,630
Members
45,334
Latest member
66Zeinab9

Latest Threads

Top