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 相关文章推荐
javascript中的有名函数和无名函数
Oct 17 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Vue.js基础知识小结
Jan 13 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 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模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
jquery实现div阴影效果示例代码
2013/09/16 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
安全大检查实施方案
2014/02/22 职场文书
保险公司演讲稿
2014/09/02 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
村党组织公开承诺书
2015/04/30 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL