编程 Javascript

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

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

- Author -

intro

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Mootools 1.2教程事件处理

Sep 15 Javascript

javascript字符串拼接的效率问题

Dec 25 Javascript

jquery、js操作checkbox全选反选

Mar 12 Javascript

jquery通过ajax加载一段文本内容的方法

Jan 15 Javascript

JavaScript模拟push

Mar 06 Javascript

利用jsonp跨域调用百度js实现搜索框智能提示

Aug 24 Javascript

纯js模仿windows系统日历

Feb 04 Javascript

jQuery.ajax向后台传递数组问题的解决方法

May 12 jQuery

easyui简介_动力节点Java学院整理

Jul 14 Javascript

webpack4 + react 搭建多页面应用示例

Aug 03 Javascript

JavaScript 中判断变量是否为数字的示例代码

Oct 22 Javascript

javascript实现京东快递单号的查询效果

Nov 30 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