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


Posted in Javascript onJuly 18, 2017

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数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
Vue常用指令详解分析
Aug 19 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
node事件循环和process模块实例分析
Feb 14 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 Javascript
Angularjs的启动过程分析
Jul 18 #Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 #Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
ES6中的rest参数与扩展运算符详解
Jul 18 #Javascript
ES6学习之变量的两种命名方法示例
Jul 18 #Javascript
vue实现表格增删改查效果的实例代码
Jul 18 #Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 #Javascript
You might like
php4的session功能评述(二)
2006/10/09 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
Javascript实现的分页函数
2007/02/07 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python 备份程序代码实现
2017/03/06 Python
windows下python连接oracle数据库
2017/06/07 Python
基于python的字节编译详解
2017/09/20 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
起诉书格式范文
2015/05/20 职场文书
举起手来观后感
2015/06/09 职场文书
礼仪培训心得体会
2016/01/22 职场文书