將列從一個表格轉移到另一個表格

我希望通過單擊按鈕將表格的「總體」列值添加到第二個表格中的下一個可用列中，我已經看到類似於此的其他問題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>

來源

2017-01-09 ChippeRockTheMurph

你的問題不明確 – maioman

如果我完全understend你問什麼，是如何打印整體上第二個表列的整體。我建議你要做的是打印總數變量td與整體類。

當你這樣做： if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } 查找功能，如jquery documentation to find function描述，

如果提供的jQuery代表了一組DOM元素，該.find（）方法允許我們通過搜索後代這些元素在DOM樹中，並從匹配元素構造一個新的jQuery對象。

因此，所有你需要做的是尋找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>

來源

2017-01-09 21:12:10

很抱歉，如果我還不清楚，我的意思是添加第二個表，並獲得總體列的值打印出來當你點擊一個按鈕。 – ChippeRockTheMurph

你想創建一個第三個整體列和兩個總和？ –

不，我想創建第二個完全不同的HTML表格，並讓代碼將'Overall'行的值添加到第二個HTML表格的第一個可用列中。 – ChippeRockTheMurph

將列從一個表格轉移到另一個表格

回答

相關問題