テーブル内でフォームまたはスプレッドシートに保存されたオプションを保存する

Question

5つの異なる表のセルで1から10までの10個のラジオボタンを選択し、6番目のセルで数字の合計5つのラジオボタンがすべて選択されると選択されます。私が今疑問に思っているのは、ボタンをクリックしてHTMLと互換性のある言語でテーブル全体を何らかの形式で保存し、6行目の値で保存する方法があるかどうかです。 6行目の値が異なる6つの異なる時間にボタンがクリックされた後、6つすべてのフォームの平均が提出された別のフォームが作成されますか？ Excelのスプレッドシートに値を保存すると、私は完璧です。 はとにかく、ここに私のコードは次のとおりです。

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

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

 

 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table align=center> 
 
    <thead> 
 
    <tr> 
 
     <th>Skating</th> 
 
     <th>Shooting</th> 
 
     <th>Passing</th> 
 
     <th>Puck Control</th> 
 
     <th>Team Play</th> 
 
     <th>Overall</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="item" data-id="1"> 
 
     <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 class="overall"> 
 
     </td> 
 

 
    </tr> 
 
    <tr class="item" data-id="2"> 
 
     <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 class="overall"> 
 
     </td> 
 

 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

は、このいずれかをチェックします。

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

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

 

 
}); 
 

 

 
function getPostData(){ 
 
    var data =[]; 
 
    
 
    $("tr.item").each(function(ind,tag){ 
 
    var row = {"dataid":$(tag).attr("data-id"), "selects" : [], "overall":0}; 
 
    
 
    $(tag).find("input:checked").each(function(i,td){ 
 
     
 
     if($(td).val()!=null) { 
 
      var item={}; 
 
     
 
      $(item).attr($(td).attr("name") , $(td).val()); 
 
     
 
      row.selects.push(item); 
 
     } 
 
     
 
    }); 
 
    
 
    if(row.selects.length>0){ 
 
     row.overall = $(tag).find(".overall").html(); 
 
     
 
     if(row.overall!="") data.push(row); 
 
    } 
 
    
 
    }); 
 
    
 
    
 
    if(data.length==0) 
 
    console.log("There is no any selected value!"); 
 
    else 
 
    console.log(data); 
 
    }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" onclick="getPostData()">Collect data</button> 
 
<table align=center> 
 
    <thead> 
 
    <tr> 
 
     <th>Skating</th> 
 
     <th>Shooting</th> 
 
     <th>Passing</th> 
 
     <th>Puck Control</th> 
 
     <th>Team Play</th> 
 
     <th>Overall</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="item" data-id="1"> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td class="overall"></td> 
 

 
    </tr> 
 
    <tr class="item" data-id="2"> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td> 
 
      <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 
 
     </td> 
 
     <td class="overall"></td> 
 

 
    </tr> 
 
    </tbody> 
 
</table>