JS实现点击Radio动态更新table数据

2019-11-17,,

tbody定义一个标签

当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX)

<script type="text/javascript">
  $(function(){
  var quotas = {
    1:{name:"工商银行",oneTime:1000},
    2:{name:"农业银行",oneTime:800},
    3:{name:"中国银行",oneTime:2000},
    4:{name:"建设银行",oneTime:10}};
 $(":radio").click(function(){
    console.info("click:"+$(this).val());
    var quota = quotas[$(this).val()];
    var quotaHtml = [];
    quotaHtml = quotaHtml.concat([
      '<tr>',
        '<td>'+quota.name+'</td>',
        '<td>'+quota.oneTime+'</td>',
        '<td>100</td>',
        '<td>100</td>',
        '<td>100</td>',
      '</td>'
    ])
    console.info("html:"+quotaHtml);
    $("#quota").html(quotaHtml)
  });
 });
</script>
<body>
  <input type="radio" name="bank" value="1"/>工商银行
  <input type="radio" name="bank" value="2"/>农业银行
  <input type="radio" name="bank" value="3"/>中国银行
  <input type="radio" name="bank" value="4"/>建设银行
  <br/>
  <table>
    <tr>
      <th>银行</th>
      <th>额度</th>
      <th>日额度</th>
      <th>月额度</th>
      <th>还有啥额度</th>
    </tr>
    <tbody id="quota"></tbody>
  </table>
</body>

以上所述是小编给大家介绍的JS实现点击Radio动态更新table数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

您可能感兴趣的文章:

  • js实现动态改变radio状态的方法
  • js实现的简单radio背景颜色选择器代码
  • js实现表单Radio切换效果的方法
  • js获取RadioButtonList的Value/Text及选中值等信息实现代码
  • JS实现的radio图片选择按钮效果
  • 纯JS打造网页中checkbox和radio的美化效果
  • javascript radio 联动效果
  • js获取 type=radio 值的方法
  • 利用JavaScript更改input中radio和checkbox样式
  • 原生javascript自定义input[type=radio]效果示例

《JS实现点击Radio动态更新table数据.doc》

下载本文的Word格式文档,以方便收藏与打印。