2017-01-09 6 views
0

ボタンのクリックで2番目のテーブルの次の利用可能な列にテーブルの「全体的な」列の値を追加したいのですが、 SQLとMy SQLを使用していますが、jQueryでこれを行う方法は不明です。私は完全にあなたが尋ねunderstend、第二のテーブル全体の列の上に全体的に印刷する方法であれば 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; 
 
    } 
 

 

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

+0

は、あなたの質問は、私は不明であった場合、私は意味が第2のテーブルを追加し、プリントアウトして総合的な列の値を取得することでした – maioman

答えて

0

:ここに私のコードです。 私はあなたがすることを提案する合計の変数をtdの両方のクラスに印刷することです。

あなたは: if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } find関数、jquery documentation to find functionで説明したように、

DOM要素の集合を表し、jQueryオブジェクトを考えると、.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>

+0

申し訳ありませんが明確ではありませんあなたがボタンをクリックしたときそこに。 – ChippeRockTheMurph

+0

第3の全体的な列を両方の合計で作成したいですか? –

+0

いいえ、2番目の完全に異なるHTMLテーブルを作成し、2番目のHTMLテーブルの最初の利用可能な列に 'Overall'行の値を追加するようにします。 – ChippeRockTheMurph

関連する問題