将单选按钮的值添加到2个不同的列中

时间：2017-03-11 18:38:49

标签： javascript jquery html css

好的，目前我的代码，将前6个单元格的值加到标记为＆＃39;整体＆＃39;的列中。我一直试图让它只为前面的5个单元格进行整体＆＃39;列并添加“出勤率”＃39;值列在标有“出勤因数”的列中，但除以“出勤率”中选择的单选按钮的值。值为10，以便如果＆＃39; 6＆＃39;被选中的0.6会出现在出勤率因素中。列。

在一个不相关的主题中，完成此操作后，是否可以在显示在“出勤因子”列中的值之前添加文本（即，而不是显示在＆＃39; 0.6＆＃39; ＆＃39; x 0.6＆＃39;出现了什么。）

无论如何，这是我的代码：

＆＃13;
＆＃13; 
    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))
    }
    })()
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

这应该这样做：

$(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));
  }
});

您可以在此处试用：https://jsfiddle.net/FrancisMacDougall/f3x9qs5s/

答案 1 :(得分：2)

嗯，你可以这样做，它主要是从整个数据的执行过滤attendance单选按钮，并将其与其他数据分开。

＆＃13;
＆＃13; 
 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))
    }
    })()
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题