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函数的引用, 关于内存的开销
Sep 17 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
详解vue路由
Aug 05 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
vue 自定义组件添加原生事件
Apr 21 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
DedeCms模板安装/制作概述
2007/03/11 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
python破解同事的压缩包密码
2020/10/14 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
商务邀请函
2015/01/30 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers