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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
使用node.js搭建服务器
2017/05/20 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python 求10个数的平均数实例
2019/12/16 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
python实现udp传输图片功能
2020/03/20 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
附答案的Java面试题
2012/11/19 面试题
《与象共舞》教学反思
2014/02/24 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
主题党日活动总结
2014/07/08 职场文书
庆七一主持词
2015/06/29 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
使用springMVC所需要的pom配置
2021/09/15 Java/Android
pt-archiver 主键自增
2022/04/26 MySQL