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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
js获取height和width的方法说明
Jan 06 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
JS实现简单的点赞与踩功能示例
Dec 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
杏林同学录(一)
2006/10/09 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python正则表达式之作业计算器
2016/03/18 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python使用代理ip访问网站的实例
2018/05/07 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
个人简历的自荐信
2013/10/23 职场文书
销售冠军获奖感言
2014/02/03 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
道德大讲堂实施方案
2014/05/14 职场文书