Scriptoo

Дело в том, что при mouseout вы окрашиваете ячейку в белый цвет, и хоть цвет строки остается голубым, цвет ячейки находится поверх цвета строки, таким образом происходит то что на скриншоте
попробуйте делать цвет ячейки (и строки тоже) прозрачным при mouseover, например, так https://codepen.io/avilona/pen/yLgwzBR
либо совсем сбрасывать style и строки и ячейки

let headers = persons.reduce((a,b)=>a.concat(Object.keys(b)),[]).filter((v, i, s)=>s.indexOf(v) === i);
str = `<table border='1'><tr>${headers.map(e=>`<th>${e}</th>`).join("\n")}</tr>` + persons.map(e=>`<tr>${headers.map(e1=>`<td>${e[e1]?e[e1]:"-"}</td>`).join("\n")}</tr>`).join("\n")+`</table>`;

Во-первых, если подключаете скрипт не перед закрытием body, то поместите его туда.
Во-вторых, document.getElementsByClassName возвращает HTMLCollection - массив, который будет автоматически изменять свое содержимое при изменениях на странице. Поэтому, либо берете из него первый элемент, либо используете document.querySelector.

Также, неплохо было бы проверять элементы, прежде чем добавлять им события; вместо onevent использовать element.addEventListener('event', handler);; вместо == использовать ===; вместо style.backgroundColor использовать style.setProperty('background-color', value);.

Вы считали значения с полей 1 раз на старте программы, а нужно читать на каждое нажатие кнопки