stackoom
  简体   繁体   中英

Add Values of Radio Buttons into 2 Different Columns

 原文  2017-03-11 18:38:48  9   2    javascript/ jquery/ html/ css

Question

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 (ie 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>

2 answers

solution1
 2  2017-03-11 19:04:29

This should do it: 

$(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));
      row.find("td.attendance").html(getAttendance(checkedItems));
    }
  })

  function getOverall(_checkedItems) {
    var total = 0;
    var cnt = 0;
    _checkedItems.each(function() {
      if(cnt++ < 5)
        total += parseFloat($(this).val());
    });
    return total;
  }
  function getAttendance(_checkedItems) {
    var attendance = 0;
    var cnt = 0;
    _checkedItems.each(function() {
      if(cnt++ == 5)
        attendance = parseFloat($(this).val());
    });
    return ("x " + (attendance/10).toFixed(1));
  }
});

You can try it here: https://jsfiddle.net/FrancisMacDougall/f3x9qs5s/

solution2
 2 ACCPTED  2017-03-11 19:08:22

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Jquery: Getting the values of different radio buttons groups Get radio buttons values and add to innerHTML script How to add up values of radio buttons in Javascript How to add passive values to radio buttons How to add values of radio buttons in JavaScript? Different colors for radio buttons Cant get values from different radio buttons groups jQuery validate() for radio buttons with same name, different values Add different class to all radio buttons previous to the checked one radio buttons and passing values
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM