当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现点击Radio动态更新table数据

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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数据，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网