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 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
JavaScript中的闭包
Feb 24 Javascript
Jquery $when done then的用法详解
May 20 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
微信小程序实现简单的select下拉框
Nov 23 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写MySQL数据 实现代码
2009/06/15 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
js点击选择文本的方法
2015/02/09 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
python爬取招聘要求等信息实例
2020/11/20 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
财务部岗位职责
2013/11/19 职场文书
个人对照检查材料
2014/02/12 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2014年妇联工作总结
2014/11/21 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技