JS实现点击Radio动态更新table数据
更新时间：2017年07月18日 14:07:11 作者：intro
这篇文章主要介绍了JS实现点击Radio动态更新table数据的相关资料,需要的朋友可以参考下
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数据，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本篇文章主要介绍了关于webpack代码拆分的解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了js实现动态加载脚本的方法,以实例形式汇总并分析了几种常用的JavaScript动态加载脚本的技巧,非常具有实用价值,需要的朋友可以参考下2015-11-11
数组，即Array类型，是开发中最常用的类型之一。这篇文章主要介绍了浅谈Javascript数组的相关资料,需要的朋友可以参考下2016-05-05
修改frameset的cols属性来达到修改各个页面所占的宽高，例如隐藏当前frame页等等，感兴趣的朋友可以了解下2013-09-09
这篇文章主要为大家详细介绍了ionic实现底部分享功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
JGrid 中，可以拖动改变列宽，简单的原理就是改变相应的 col 的 style.width 今天看到skybot 同学在问这个问题，就又把这个功能拿出来，单独实现了一下（有改进）2008-07-07
这篇文章主要介绍了ES6知识点整理之String字符串新增常用方法,结合实例形式分析了ES6字符串String includes,startsWith,endsWith等方法相关使用技巧,需要的朋友可以参考下2019-07-07
JavaScript动态序列比对代码，随便 写着玩的，在网上见到用VC、VB写的比较多，这个算法以前在高中课本上见到过，我只是用Js写一下试试，或许还不是太准确。2010-07-07
《JavaScript高级程序设计》阅读笔记（二） ECMAScript中的原始类型
ECMAScript有5种原始类型(primitive type)，即Undefined、Null、Boolean、Number和String。ECMAScript提供了typeof来判断值的类型2012-02-02
不错的应用，一般用于开发系统中，图片新闻，直接显示图片2008-08-08
最新评论