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 Global对象
Aug 13 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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
Zerg兵种介绍
2020/03/14 星际争霸
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
OpenLayers实现图层切换控件
2020/09/25 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
农救科工作职责
2013/11/27 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
老公保证书范文
2014/04/29 职场文书
优秀员工演讲稿
2014/05/19 职场文书
2014高考励志标语
2014/06/05 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
党支部鉴定意见
2015/06/02 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书