JSFiddle - React, Tailwind, and code Playground
HTML
<div id="butt">
<input value="Convert Values" type="button" onclick="ConvertTable()" />
</div>
<hr />
<div id="bodyDiv">
<div id="dvCSV">
<table width="100%" class="sortable">
<tbody><tr width="100%">
<td>
<select id="Value_0">
<option value="None">N/A</option>
<option value="name">Name</option>
<option value="Lat">Lat</option>
<option value="Lon">Long</option>
</select>
</td>
<td>
<select id="Value_1">
<option value="None">N/A</option>
<option value="name">Name</option>
<option value="Lat">Lat</option>
<option value="Lon">Long</option>
</select>
</td>
<td>
<select id="Value_2">
<option value="None">N/A</option>
<option value="name">Name</option>
<option value="Lat">Lat</option>
<option value="Lon">Long</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>Bore</td>
<td>dd_lon</td>
<td>dd_lat</td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td>MW-1</td>
<td>-89.325375</td>
<td>43.07104167</td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td>MW-10-CMT</td>
<td>-89.32837458</td>
<td>43.07178767</td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td>MW-11-CMT</td>
<td>-89.32465527</td>
<td>43.0707977</td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td>MW-12-CMT</td>
<td>-89.325341</td>
<td>43.07115595</td>
<td><input type="checkbox" checked=""></td>
</tr>
<tr>
<td>MW-13</td>
<td>-89.32509187</td>
<td>43.06975769</td>
<td><input type="checkbox"...
JavaScript
var converted=0;
var LatColumn = null; //column for Latitude in table
var LongColumn = null; //column for Longitude in table
var colLocs = []; //array describing the user defined locations for the data
var LatData = []; //Latitude data converted from the table to an array for calculation
var LongData = []; //Longitude data converted from the table to an array for calculation
var UTMzone = []; //UTM zone array to be placed in table
var UTMeast = []; //UTM easting array to be placed in table
var UTMnorth = [];
function CheckLocations()
{
//Checks the uploaded data for the locations of the Lat/Lon Data based on user dropdowns
colLocs[0] = ($('#Value_0 :selected').text());
colLocs[1] = ($('#Value_1 :selected').text());
colLocs[2] = ($('#Value_2 :selected').text());
colLocs[3] = ($('#Value_3 :selected').text());
LatColumn = colLocs.indexOf("Lat");
LongColumn = colLocs.indexOf("Long");
}
function AllTheSame(array) {
var first = array[0];
return array.every(function (element) {
return element === first;
});
}
function data2Array() {
//gets the lat and long data from the assigned columns and transfers them to an array for calculation
$("#dvCSV tr td:nth-child(" + (LatColumn + 1) + ")").each(function () {
var tdNode = $("<td/>");
tdNode.html(this.innerHTML);
LatData.push(tdNode.text());
});
LatData.splice(0, 2);
LatData.unshift(1, 1);
$("#dvCSV tr td:nth-child(" + (LongColumn + 1) + ")").each(function () {
var tdNode = $("<td/>");
tdNode.html(this.innerHTML);
LongData.push(tdNode.text());
});
LongData.splice(0, 2); //these two lines remove the first two items then replace them with 0
LongData.unshift(1, 1);
}
function removeChecks() {
$("#dvCSV th:last-child, #dvCSV td:last-child").remove();
}
function makeCheckArray() {
var searchIDs = $("#dvCSV tbody td:last()...