列的值从一个表转移到另一个表

Question

I want my table's 'Overall' column values to be added to the next available column in a second table with the click of a button, I have seen other questions similar to this in SQL and My SQL but I am unsure on how to do this in jQuery. Here is my code:

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

If i fully understend what you asked, is how to print the overall on the second table overall column. What i suggest you to do is to print the total variable to both td with the overall class.

when you do: if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } the find function, as described in jquery documentation to find function ,

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.

so all you need to do is search for td.overall that inside the document with $(selector);

check this out:

 $(document).ready(function() { $(':radio').change(function() { var row = $(this).closest('.item'); var checkedItems = row.find(":checked") if (checkedItems.length == 5) { $("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>