JSFiddle - React, Tailwind, and code Playground

by minitech

HTML

<table>
    <tr><th>Name</th><th>Phone #</th></tr>
    <tr><td>John Smith</td><td>(123) 456-7890</td></tr>
    <tr><td><input placeholder="Your name" /></td><td><input placeholder="Your phone number" /></td></tr>
</table>

CSS

td {
    padding: 5px;
}

th {
    font-weight: bold;
}

JavaScript

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    // Is it the child of a row?
    var el = inputs[i];
    while(el = el.parentNode) {
        if(el.nodeName.toLowerCase() === 'tr') {
            inputs[i].onfocus = function() {
                this.parentRow.style.backgroundColor = 'red';
            };
            inputs[i].onblur = function() {
                this.parentRow.style.backgroundColor = '';
            };
            inputs[i].parentRow = el;
            break;
        }
    }
}