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对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
JavaScript快速调试的两个技巧
Nov 04 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
Yii框架登录流程分析
2014/12/03 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python 递归函数详解及实例
2016/12/27 Python
机器学习python实战之决策树
2017/11/01 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python如何将图片转换为字符图片
2020/08/19 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python3+Appium安装使用教程
2019/07/05 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python 实现矩阵按对角线打印
2019/11/29 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
管理信息系学生的自我评价
2014/01/11 职场文书
绿化工程实施方案
2014/03/17 职场文书
公司应聘求职信
2014/06/21 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
配置nginx负载均衡
2022/05/06 Servers