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 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
解决Vue watch里调用方法的坑
Nov 07 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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加密解密示例分享
2014/01/29 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
php源码的安装方法和实例
2019/09/26 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
javascript 特殊字符串
2009/02/25 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
vue 监听屏幕高度的实例
2018/09/05 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
带你认识Django
2019/01/15 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
Python实现简单猜数字游戏
2021/02/03 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
配件采购员岗位职责
2013/12/03 职场文书
银行实习的自我鉴定
2013/12/10 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书