<form name = "rmform">
<div style="width:100%" align = "center">
<div>Weight</div>
<div><input type = "number" name = "weight" onchange="checkWeightValue(this.value)" placeholder="1～999"></div></br>
<div>Reps</div>
<div><input type = "number" name = "reps" onchange="checkRepsValue(this.value)" placeholder="2～12"></div></br>
<div>k</div>
<div><input type = "number" name = "para" value="33.3"></div></br>

<div align = "center"><input type="button" value="Calculate" name="btn1" onclick="calc(weight.value, reps.value, para.value)" /></div>
</br>
<div align = "center" id = "calc_result" style="font-size: 40px;"></div>
</div>
</form>
</br>
<div align="center">
<table id="rm-table"><tbody>
</tbody></table>
</div>

<script language="javascript">
var tbody = document.getElementById("rm-table").getElementsByTagName("tbody")[0];
for (i=0;11>i;i++){
var tr = document.createElement("tr");
var th = document.createElement("th");
var td = document.createElement("td");
th.innerHTML = i+2;

tr.style.width = "100%";
th.style.width = "5em";
td.style.width = "5em";

tr.appendChild(th);
tr.appendChild(td);
tbody.appendChild(tr);
}
function calc(w,r,k){
var rm = w * (1+r/k);

var rmTbl = document.getElementById("rm-table").getElementsByTagName("td");
for(i=2; 13>i; i++){
  var weight = rmTbl[i-2];
  if (i==r){
  weight.innerHTML = w;
  }else{
weight.innerHTML = (rm / (1+i/k)).toFixed(1);
}
}

rm = rm.toFixed(1);
document.getElementById("calc_result").innerHTML="1RM "+ rm;

}

function checkWeightValue(w){
if (w > 999){
document.rmform.weight.value = 999;
} else if (1 > w){
document.rmform.weight.value = 1;
}
}

function checkRepsValue(r){
if (2 > r){
document.rmform.reps.value = 2;
}else if (r > 12){
document.rmform.reps.value = 12;
}
}

</script>

<style>
#rm-table, #rm-table th, #rm-table td{
border: solid 1px;
border-collapse: collapse;
}
#rm-table th, #rm-table td{
padding: 1px;
width: auto;
text-align:center;
}
</style>