JSFiddle - React, Tailwind, and code Playground
HTML
<div class="mainWrapper">
<form method="get">
<h5>Enter Numbers:</h5>
<input type="text" name="X" id="X" value="7"></input>
<h5>X</h5>
<input type="text" name="Y" id="Y" value="7"></input>
</form>
</div><!-- /MainWrapper -->
<table>
<tr>
<td>X</td>
<td class="x-head x2">2</td>
<td class="x-head x3">3</td>
<td class="x-head x4">4</td>
<td class="x-head x5">5</td>
<td class="x-head x6">6</td>
<td class="x-head x7">7</td>
<td class="x-head x8">8</td>
<td class="x-head x9">9</td>
<td class="x-head x10">10</td>
<td class="x-head x11">11</td>
<td class="x-head x12">12</td>
</tr>
<tr>
<td class="y-head y2">2</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
<td class="content x0">x0</td>
</tr>
<tr>
<td class="y-head y3">3</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
<td class="content x1">x1</td>
</tr>
<tr>
<td class="y-head y4">4</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content x2">x2</td>
<td class="content...
CSS
table, td{border: 1px solid black;}
JavaScript
$y2 = $("input#Y").val();
$x2 = $("input#X").val();
function headers() {
// set the heading of the grid to the values 5 lower and 5 higher than input
$('.x-head').each(function(i) {
$(this).html($x2 + i);
});
// set the heading of the grid to the values 5 lower and 5 higher than input
$('.y-head').each(function(i) {
$(this).html($y2 + i);
console.log($y2 + ' y-head ' + i);
});
};
function calculate() {
// calculate grid values (column at a time)
$('.content.x0').each( function(){
var yHead = $('.y-head.y2').text();
var xHead = $('.x-head.x2').text();
console.log(yHead);
return false;
})
};
$('.content.x0').css("color", "red");
//set input A to pos x2 on the grid
$("input#X").keyup(function () {
var value = $(this).val();
// set global var of x2 based on x input
$x2 = $(this).val() - 5;
headers();
calculate();
}).keyup();
// set input B position y2 on the grid
$("input#Y").keyup(function () {
var value = $(this).val();
// set global var of x2 based on x input
$y2 = $(this).val() - 5;
//headers();
calculate();
}).keyup();