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下判断一个元素是否存在的代码
Mar 05 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
javascript 特殊字符串
2009/02/25 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
基于python实现名片管理系统
2018/11/30 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python虚拟环境完美部署教程
2019/08/06 Python
对python中各个response的使用说明
2020/03/28 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
《草原》教学反思
2014/02/15 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
体育教师个人总结
2015/02/09 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
导游词之广西漓江
2019/11/02 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang