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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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
php strrpos()与strripos()函数
2013/08/31 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
python绘制简单彩虹图
2018/11/19 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
小学生安全保证书
2014/02/01 职场文书
新护士岗前培训制度
2014/02/02 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫