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

时间：2017-01-09 20:55:57

标签： javascript jquery html css

我想要我的桌子＆＃39;整体＆＃39;通过单击按钮将列值添加到第二个表中的下一个可用列，我在SQL和My SQL中看到了与此类似的其他问题，但我不确定如何在jQuery中执行此操作。这是我的代码：

＆＃13;
＆＃13; 
$(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;
  }


});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

如果我完全按下你的要求，是如何在第二张表的整体列上打印整体。 我建议你做的是将总变量打印到整个类的 td 。

当你这样做时： if (checkedItems.length == 5) { row.find("td.overall").html(getOverall(checkedItems)); } find函数，如jquery documentation to find function，

中所述
  

给定一个表示一组DOM元素的jQuery对象，.find（）方法允许我们在DOM树中搜索这些元素的后代，并从中构造一个新的jQuery对象。匹配元素。

所以您需要做的就是使用$（selector）搜索文档中的 td.overall ;

检查一下：

＆＃13;
＆＃13; 
$(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;
  }


});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题