JavaScript

超轻量级php框架startmvc

JS实现点击Radio动态更新table数据

更新时间:2020-05-24 23:06 作者:startmvc
tbody定义一个标签当上面变化的,在js里面做拼接就行了,拼接结束tbody.html(XXX)<scripttype="t

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数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!