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 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php array_walk() 数组函数
2011/07/12 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
php中使用GD库做验证码
2016/03/31 PHP
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
详解python的四种内置数据结构
2019/03/19 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Python内置异常类型全面汇总
2020/05/28 Python
通俗讲解python 装饰器
2020/09/07 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
机械制造专业个人的自我评价
2013/12/28 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
重阳节简报
2015/07/20 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
施工安全协议书
2016/03/22 职场文书