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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
javascript之bind使用介绍
Oct 09 Javascript
javascript 闭包详解
Feb 15 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
详解微信小程序的 request 封装示例
Aug 21 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
Vue实现图书管理案例
Jan 20 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
Python中turtle作图示例
2017/11/15 Python
对python中的logger模块全面讲解
2018/04/28 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Python字符串的常见操作实例小结
2019/04/08 Python
django 简单实现登录验证给你
2019/11/06 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
交通法规咨询中心工作职责
2013/11/27 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
医院辞职信范文
2014/01/17 职场文书
三字经教学反思
2014/04/26 职场文书
2015高考寄语集锦
2015/02/27 职场文书
出纳岗位职责范本
2015/03/31 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python