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 indexOf使用方法
Aug 19 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
原生js实现随机点名功能
Nov 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
ip签名探针
2006/10/09 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Python中实现的RC4算法
2015/02/14 Python
python读写二进制文件的方法
2015/05/09 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
pygame实现弹球游戏
2020/04/14 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
希特勒的演讲稿
2014/05/23 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
工程服务质量承诺书
2015/04/29 职场文书
导游词之西递宏村
2019/12/10 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
详解nginx location指令
2022/01/18 Servers