列的值從一個表轉移到另一個表

Question

我希望通過單擊按鈕將表的“總體”列值添加到第二個表的下一個可用列中，我已經在SQL和My SQL中看到了與此類似的其他問題，但是我不確定如何執行此操作在jQuery中。 這是我的代碼：

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

如果我完全理解您的要求，那么如何在第二個表格的總體列上打印總體。 我建議您要做的是將總體變量同時打印到兩個td中 。

當您這樣做時： if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); }查找功能，如jquery文檔中所述，查找功能 ，

給定一個表示一組DOM元素的jQuery對象，.find（）方法使我們可以在DOM樹中搜索這些元素的后代 ，並從匹配的元素構造一個新的jQuery對象。

因此，您所需要做的就是使用$（selector）;在文檔內部搜索td.overall ；

看一下這個：

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