ChippeRockTheMurph ChippeRockTheMurph - 9 months ago 27
CSS Question

Add Values of Radio Buttons into 2 Different Columns

Okay, so currently my code, adds up the values of the first 6 cells into the column labeled 'Overall'. I have been trying to get it to only do the first 5 cells for the 'Overall' column and add the 'Attendance' values into the column labeled 'Attendance Factor', but divide the value of the radio button selected in the 'Attendance' value by 10 so that if '6' was selected 0.6 would show up in the 'Attendance Factor' column.

In an unrelated topic, after this is done, is it possible to add text before the value that shows up in the 'Attendance Factor column (i.e. instead of '0.6' that shows up 'x 0.6'is what shows up).

Anyways here is my code:



var overall= $('#overall');

$(document).ready(function() {
$(':radio').change(function() {
var row = $(this).closest('.item');
var checkedItems = row.find(":checked")
if (checkedItems.length == 6) {
row.find("td.overall").html(getOverall(checkedItems));
}
})

function getOverall(_checkedItems) {
var total = 0;
_checkedItems.each(function() {
total += parseFloat($(this).val());
});
return total;
}


});

var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}<\/x:Name><x:WorksheetOptions><x:DisplayGridlines/><\/x:WorksheetOptions><\/x:ExcelWorksheet><\/x:ExcelWorksheets><\/x:ExcelWorkbook><\/xml><![endif]--><\/head><body><table>{table}<\/table><\/body><\/html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 115%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
text-align: center
}
tr:nth-child(even) {
background-color: #dddddd;
}
div {
padding-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="copyTable">
<thead>
<tr>
<th>Team</th>
<th>Player</th>
<th>Number</th>
<th>Skating</th>
<th>Shooting</th>
<th>Passing</th>
<th>Puck Control</th>
<th>Team Play</th>
<th>Attendance</th>
<th>Overall</th>
<th>Attendance Factor</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1">
<td></td>
<td></td>
<td></td>
<td>
<form action="">
<input type="radio" name="skating" value="1">1
<input type="radio" name="skating" value="2">2
<input type="radio" name="skating" value="3">3
<input type="radio" name="skating" value="4">4
<input type="radio" name="skating" value="5">5
<br>
<input type="radio" name="skating" value="6">6
<input type="radio" name="skating" value="7">7
<input type="radio" name="skating" value="8">8
<input type="radio" name="skating" value="9">9
<input type="radio" name="skating" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="shooting" value="1">1
<input type="radio" name="shooting" value="2">2
<input type="radio" name="shooting" value="3">3
<input type="radio" name="shooting" value="4">4
<input type="radio" name="shooting" value="5">5
<br>
<input type="radio" name="shooting" value="6">6
<input type="radio" name="shooting" value="7">7
<input type="radio" name="shooting" value="8">8
<input type="radio" name="shooting" value="9">9
<input type="radio" name="shooting" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="passing" value="1">1
<input type="radio" name="passing" value="2">2
<input type="radio" name="passing" value="3">3
<input type="radio" name="passing" value="4">4
<input type="radio" name="passing" value="5">5
<br>
<input type="radio" name="passing" value="6">6
<input type="radio" name="passing" value="7">7
<input type="radio" name="passing" value="8">8
<input type="radio" name="passing" value="9">9
<input type="radio" name="passing" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="puck_control" value="1">1
<input type="radio" name="puck_control" value="2">2
<input type="radio" name="puck_control" value="3">3
<input type="radio" name="puck_control" value="4">4
<input type="radio" name="puck_control" value="5">5
<br>
<input type="radio" name="puck_control" value="6">6
<input type="radio" name="puck_control" value="7">7
<input type="radio" name="puck_control" value="8">8
<input type="radio" name="puck_control" value="9">9
<input type="radio" name="puck_control" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="team_play" value="1">1
<input type="radio" name="team_play" value="2">2
<input type="radio" name="team_play" value="3">3
<input type="radio" name="team_play" value="4">4
<input type="radio" name="team_play" value="5">5
<br>
<input type="radio" name="team_play" value="6">6
<input type="radio" name="team_play" value="7">7
<input type="radio" name="team_play" value="8">8
<input type="radio" name="team_play" value="9">9
<input type="radio" name="team_play" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="attendance" value="1">1
<input type="radio" name="attendance" value="2">2
<input type="radio" name="attendance" value="3">3
<input type="radio" name="attendance" value="4">4
<input type="radio" name="attendance" value="5">5
<br>
<input type="radio" name="attendance" value="6">6
<input type="radio" name="attendance" value="7">7
<input type="radio" name="attendance" value="8">8
<input type="radio" name="attendance" value="9">9
<input type="radio" name="attendance" value="10">10
</form>
</td>
<td class="overall" id="overall">
</td>
<td class="attendance" id="attendance"></td>

</tr>
<tr class="item" data-id="2">
<td></td>
<td></td>
<td></td>
<td>
<form action="">
<input type="radio" name="skating" value="1">1
<input type="radio" name="skating" value="2">2
<input type="radio" name="skating" value="3">3
<input type="radio" name="skating" value="4">4
<input type="radio" name="skating" value="5">5
<br>
<input type="radio" name="skating" value="6">6
<input type="radio" name="skating" value="7">7
<input type="radio" name="skating" value="8">8
<input type="radio" name="skating" value="9">9
<input type="radio" name="skating" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="shooting" value="1">1
<input type="radio" name="shooting" value="2">2
<input type="radio" name="shooting" value="3">3
<input type="radio" name="shooting" value="4">4
<input type="radio" name="shooting" value="5">5
<br>
<input type="radio" name="shooting" value="6">6
<input type="radio" name="shooting" value="7">7
<input type="radio" name="shooting" value="8">8
<input type="radio" name="shooting" value="9">9
<input type="radio" name="shooting" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="passing" value="1">1
<input type="radio" name="passing" value="2">2
<input type="radio" name="passing" value="3">3
<input type="radio" name="passing" value="4">4
<input type="radio" name="passing" value="5">5
<br>
<input type="radio" name="passing" value="6">6
<input type="radio" name="passing" value="7">7
<input type="radio" name="passing" value="8">8
<input type="radio" name="passing" value="9">9
<input type="radio" name="passing" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="puck_control" value="1">1
<input type="radio" name="puck_control" value="2">2
<input type="radio" name="puck_control" value="3">3
<input type="radio" name="puck_control" value="4">4
<input type="radio" name="puck_control" value="5">5
<br>
<input type="radio" name="puck_control" value="6">6
<input type="radio" name="puck_control" value="7">7
<input type="radio" name="puck_control" value="8">8
<input type="radio" name="puck_control" value="9">9
<input type="radio" name="puck_control" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="team_play" value="1">1
<input type="radio" name="team_play" value="2">2
<input type="radio" name="team_play" value="3">3
<input type="radio" name="team_play" value="4">4
<input type="radio" name="team_play" value="5">5
<br>
<input type="radio" name="team_play" value="6">6
<input type="radio" name="team_play" value="7">7
<input type="radio" name="team_play" value="8">8
<input type="radio" name="team_play" value="9">9
<input type="radio" name="team_play" value="10">10
</form>
</td>
<td>
<form action="">
<input type="radio" name="attendance" value="1">1
<input type="radio" name="attendance" value="2">2
<input type="radio" name="attendance" value="3">3
<input type="radio" name="attendance" value="4">4
<input type="radio" name="attendance" value="5">5
<br>
<input type="radio" name="attendance" value="6">6
<input type="radio" name="attendance" value="7">7
<input type="radio" name="attendance" value="8">8
<input type="radio" name="attendance" value="9">9
<input type="radio" name="attendance" value="10">10
</form>
</td>
<td class="overall" id="overall">
</td>
<td class="attendance" id="attendance"></td>

</tr>
</tbody>
</table>
<div align="center">
<input type="button" onclick="tableToExcel('copyTable')" value="Export to Excel">
</div>




Answer Source

Well you can do it like this, it's mainly filtering the attendance radio button from the execution for the overall data and separate it from others.

 var overall= $('#overall');

    $(document).ready(function() {
      $(':radio').change(function(e) {
        var row = $(this).closest('.item'); 
        var checkedItems = row.find(":checked:not(:radio[name='attendance'])")
      if(e.target.name != "attendance"){
        
        if (checkedItems.length == 5) {
          row.find("td.overall").html(getOverall(checkedItems));
        }
      }else{
      	 row.find("td.attendance").html("x "+parseFloat($(this).val()/10).toFixed(1));
      }  
    })

    function getOverall(_checkedItems) {
    var total = 0;
    _checkedItems.each(function() {
    total += parseFloat($(this).val());
    });
    return total;
    }


    });

    var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}<\/x:Name><x:WorksheetOptions><x:DisplayGridlines/><\/x:WorksheetOptions><\/x:ExcelWorksheet><\/x:ExcelWorksheets><\/x:ExcelWorkbook><\/xml><![endif]--><\/head><body><table>{table}<\/table><\/body><\/html>'
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
    return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
    window.location.href = uri + base64(format(template, ctx))
    }
    })()
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 115%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 5px;
  text-align: center
}
tr:nth-child(even) {
  background-color: #dddddd;
}   
div {
  padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="copyTable">
  <thead>
    <tr>
  <th>Team</th>
  <th>Player</th>
  <th>Number</th>
  <th>Skating</th>
  <th>Shooting</th>
  <th>Passing</th>
  <th>Puck Control</th>
  <th>Team Play</th>
  <th>Attendance</th>
  <th>Overall</th>
  <th>Attendance Factor</th>
    </tr>
  </thead>
  <tbody>
<tr class="item" data-id="1">
  <td></td>
  <td></td>
  <td></td>
  <td>
    <form action="">
      <input type="radio" name="skating" value="1">1
      <input type="radio" name="skating" value="2">2
      <input type="radio" name="skating" value="3">3
      <input type="radio" name="skating" value="4">4
      <input type="radio" name="skating" value="5">5
      <br>
      <input type="radio" name="skating" value="6">6
      <input type="radio" name="skating" value="7">7
      <input type="radio" name="skating" value="8">8
      <input type="radio" name="skating" value="9">9
      <input type="radio" name="skating" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="shooting" value="1">1
      <input type="radio" name="shooting" value="2">2
      <input type="radio" name="shooting" value="3">3
      <input type="radio" name="shooting" value="4">4
      <input type="radio" name="shooting" value="5">5
      <br>
      <input type="radio" name="shooting" value="6">6
      <input type="radio" name="shooting" value="7">7
      <input type="radio" name="shooting" value="8">8
      <input type="radio" name="shooting" value="9">9
      <input type="radio" name="shooting" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="passing" value="1">1
      <input type="radio" name="passing" value="2">2
      <input type="radio" name="passing" value="3">3
      <input type="radio" name="passing" value="4">4
      <input type="radio" name="passing" value="5">5
      <br>
      <input type="radio" name="passing" value="6">6
      <input type="radio" name="passing" value="7">7
      <input type="radio" name="passing" value="8">8
      <input type="radio" name="passing" value="9">9
      <input type="radio" name="passing" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="puck_control" value="1">1
      <input type="radio" name="puck_control" value="2">2
      <input type="radio" name="puck_control" value="3">3
      <input type="radio" name="puck_control" value="4">4
      <input type="radio" name="puck_control" value="5">5
      <br>
      <input type="radio" name="puck_control" value="6">6
      <input type="radio" name="puck_control" value="7">7
      <input type="radio" name="puck_control" value="8">8
      <input type="radio" name="puck_control" value="9">9
      <input type="radio" name="puck_control" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="team_play" value="1">1
      <input type="radio" name="team_play" value="2">2
      <input type="radio" name="team_play" value="3">3
      <input type="radio" name="team_play" value="4">4
      <input type="radio" name="team_play" value="5">5
      <br>
      <input type="radio" name="team_play" value="6">6
      <input type="radio" name="team_play" value="7">7
      <input type="radio" name="team_play" value="8">8
      <input type="radio" name="team_play" value="9">9
      <input type="radio" name="team_play" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="attendance" value="1">1
      <input type="radio" name="attendance" value="2">2
      <input type="radio" name="attendance" value="3">3
      <input type="radio" name="attendance" value="4">4
      <input type="radio" name="attendance" value="5">5
      <br>
      <input type="radio" name="attendance" value="6">6
      <input type="radio" name="attendance" value="7">7
      <input type="radio" name="attendance" value="8">8
      <input type="radio" name="attendance" value="9">9
      <input type="radio" name="attendance" value="10">10
    </form>
  </td>
  <td class="overall" id="overall">
  </td>
  <td class="attendance" id="attendance"></td>

</tr>
<tr class="item" data-id="2">
  <td></td>
  <td></td>
  <td></td>
  <td>
    <form action="">
      <input type="radio" name="skating" value="1">1
      <input type="radio" name="skating" value="2">2
      <input type="radio" name="skating" value="3">3
      <input type="radio" name="skating" value="4">4
      <input type="radio" name="skating" value="5">5
      <br>
      <input type="radio" name="skating" value="6">6
      <input type="radio" name="skating" value="7">7
      <input type="radio" name="skating" value="8">8
      <input type="radio" name="skating" value="9">9
      <input type="radio" name="skating" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="shooting" value="1">1
      <input type="radio" name="shooting" value="2">2
      <input type="radio" name="shooting" value="3">3
      <input type="radio" name="shooting" value="4">4
      <input type="radio" name="shooting" value="5">5
      <br>
      <input type="radio" name="shooting" value="6">6
      <input type="radio" name="shooting" value="7">7
      <input type="radio" name="shooting" value="8">8
      <input type="radio" name="shooting" value="9">9
      <input type="radio" name="shooting" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="passing" value="1">1
      <input type="radio" name="passing" value="2">2
      <input type="radio" name="passing" value="3">3
      <input type="radio" name="passing" value="4">4
      <input type="radio" name="passing" value="5">5
      <br>
      <input type="radio" name="passing" value="6">6
      <input type="radio" name="passing" value="7">7
      <input type="radio" name="passing" value="8">8
      <input type="radio" name="passing" value="9">9
      <input type="radio" name="passing" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="puck_control" value="1">1
      <input type="radio" name="puck_control" value="2">2
      <input type="radio" name="puck_control" value="3">3
      <input type="radio" name="puck_control" value="4">4
      <input type="radio" name="puck_control" value="5">5
      <br>
      <input type="radio" name="puck_control" value="6">6
      <input type="radio" name="puck_control" value="7">7
      <input type="radio" name="puck_control" value="8">8
      <input type="radio" name="puck_control" value="9">9
      <input type="radio" name="puck_control" value="10">10
    </form>
  </td>
  <td>
    <form action="">
      <input type="radio" name="team_play" value="1">1
      <input type="radio" name="team_play" value="2">2
      <input type="radio" name="team_play" value="3">3
      <input type="radio" name="team_play" value="4">4
      <input type="radio" name="team_play" value="5">5
      <br>
      <input type="radio" name="team_play" value="6">6
      <input type="radio" name="team_play" value="7">7
      <input type="radio" name="team_play" value="8">8
      <input type="radio" name="team_play" value="9">9
      <input type="radio" name="team_play" value="10">10
    </form>
  </td>
<td>
<form action="">
  <input type="radio" name="attendance" value="1">1
  <input type="radio" name="attendance" value="2">2
  <input type="radio" name="attendance" value="3">3
  <input type="radio" name="attendance" value="4">4
  <input type="radio" name="attendance" value="5">5
  <br>
  <input type="radio" name="attendance" value="6">6
  <input type="radio" name="attendance" value="7">7
  <input type="radio" name="attendance" value="8">8
  <input type="radio" name="attendance" value="9">9
  <input type="radio" name="attendance" value="10">10
</form>
</td>
  <td class="overall" id="overall">
  </td>
  <td class="attendance" id="attendance"></td>

</tr>
  </tbody>
</table>
<div align="center">
<input type="button" onclick="tableToExcel('copyTable')" value="Export to Excel">
</div>