I have a HTML table with a mixture of columns being hard coded values and others being set via java script functions dependant on user input. I can export the hard coded data fine, however it is the user defined values that I can't seem to pull through.
Here is the sample of my project:
function setSquat() {
var squatMax = document.getElementById("txtSquatInput").value;
var values = [0.4, //0
0.5, //1
0.6, //2
0.65, //3
0.7, //4
0.75, //5
0.8, //6
0.85, //7
0.9]; //8
var squatVal1 = values[3] * squatMax;
var squatVal2 = values[5] * squatMax;
var squatVal3 = values[6] * squatMax;
var squatVal4 = values[4] * squatMax;
var squatVal5 = values[6] * squatMax;
var squatVal6 = values[7] * squatMax;
var squatVal7 = values[5] * squatMax;
var squatVal8 = values[7] * squatMax;
var squatVal9 = values[8] * squatMax;
var squatVal10 = values[0] * squatMax;
var squatVal11 = values[1] * squatMax;
var squatVal12 = values[2] * squatMax;
//Inputting squat values
document.getElementById("tdW1S1").innerHTML = Math.round(squatVal1);
document.getElementById("tdW1S2").innerHTML = Math.round(squatVal2);
document.getElementById("tdW1D3").innerHTML = Math.round(squatVal3);
document.getElementById("tdW2D1").innerHTML = Math.round(squatVal4);
document.getElementById("tdW2D2").innerHTML = Math.round(squatVal5);
document.getElementById("tdW2D3").innerHTML = Math.round(squatVal6);
document.getElementById("tdW3D1").innerHTML = Math.round(squatVal7);
document.getElementById("tdW3D2").innerHTML = Math.round(squatVal8);
document.getElementById("tdW3D3").innerHTML = Math.round(squatVal9);
document.getElementById("tdW4D1").innerHTML = Math.round(squatVal10);
document.getElementById("tdW4D2").innerHTML = Math.round(squatVal11);
document.getElementById("tdW4D3").innerHTML = Math.round(squatVal12);
return squatMax;
}
<!-- Datatables links -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script
src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js">
</script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
$(document).ready(function () {
$('#531Table').DataTable({
"stateSave": true,
"paging": false,
"ordering": false,
"info": false,
"bFilter": false,
dom: 'Bfrtip',
buttons: [
'pdf',
'excel',
]
});
});
</script>
<table class="table table-hover" id="531Table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">Squat</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">Deadlift</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">Bench</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">Row</th>
<th scope="col"></th>
</tr>
<tr>
<!-- Sub Headings -->
<th scope="col"></th>
<th scope="col">Sets</th>
<th scope="col">Reps</th>
<th scope="col">Base Number</th>
<th scope="col"></th>
<th scope="col">Sets</th>
<th scope="col">Reps</th>
<th scope="col">Base Number</th>
<th scope="col"></th>
<th scope="col">Sets</th>
<th scope="col">Reps</th>
<th scope="col">Base Number</th>
<th scope="col"></th>
<th scope="col">Sets</th>
<th scope="col">Reps</th>
<th scope="col">Base Number</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<!-- Week 1 -->
<!--Squat -->
<th scope="row"></th>
<td>1 - 65%</td>
<td>5</td>
<td id="tdW1S1"></td>
<td></td>
<!--Deadlift -->
<td>1 - 65%</td>
<td>5</td>
<td id="tdW1D1"></td>
<td></td>
<!-- Bench -->
<td>1 - 65%</td>
<td>5</td>
<td id="tdW1B1"></td>
<td></td>
<!-- OHP -->
<td>1 - 65%</td>
<td>5</td>
<td id="tdW1O1"></td>
</tr>
<tr id="row2">
<!--Squat -->
<th scope="row" class="auto-style2">Week 1</th>
<td class="auto-style1">2 - 75%</td>
<td class="auto-style1">5</td>
<td id="tdW1S2" class="auto-style1"></td>
<td class="auto-style1"></td>
<!--Deadlift -->
<td class="auto-style1">2 - 75%</td>
<td class="auto-style1">5</td>
<td class="auto-style1" id="tdW1D2"></td>
<td class="auto-style1"></td>
<!-- Bench -->
<td class="auto-style1">2 - 75%</td>
<td class="auto-style1">5</td>
<td class="auto-style1" id="tdW1B2"></td>
<td class="auto-style1"></td>
<!-- OHP -->
<td class="auto-style1">2 - 75%</td>
<td class="auto-style1">5</td>
<td class="auto-style1" id="tdW1O2"></td>
</tr>
<tr id="row3" style="border-bottom: solid">
<!--Squat -->
<th scope="row"></th>
<td>3 - 80%</td>
<td>5</td>
<td id="tdW1S3"></td>
<td></td>
<!--Deadlift -->
<td>3 - 80%</td>
<td>5</td>
<td id="tdW1D3"></td>
<td></td>
<!-- Bench -->
<td>3 - 80%</td>
<td>5</td>
<td id="tdW1B3"></td>
<td></td>
<!-- OHP -->
<td>3 - 80%</td>
<td>5</td>
<td id="tdW1O3"></td>
</tr>
</tbody>
</table>
I've added the first three rows of the table data, two of which are just headings. The cells in question I am not getting through are in row 3 with the id values tdW1DX
This is an example of one of the js functions executed onclick
- I do realize there are probably more efficient ways of doing this, however this is what works for me
I want the user to input their desired values, perform the calculation, have those placed in the table and then be able to export the table including their specific values.