JS實現(xiàn)點擊Radio動態(tài)更新table數(shù)據(jù)

更新時間：2017年07月18日 14:07:11 作者：intro

這篇文章主要介紹了JS實現(xiàn)點擊Radio動態(tài)更新table數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下

tbody定義一個標簽

當上面變化的，在js里面做拼接就行了，拼接結(jié)束 tbody.html(XXX)

<script type="text/javascript">
  $(function(){
  var quotas = {
    1:{name:"工商銀行",oneTime:1000},
    2:{name:"農(nóng)業(yè)銀行",oneTime:800},
    3:{name:"中國銀行",oneTime:2000},
    4:{name:"建設(shè)銀行",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"/>農(nóng)業(yè)銀行
  <input type="radio" name="bank" value="3"/>中國銀行
  <input type="radio" name="bank" value="4"/>建設(shè)銀行
  <br/>
  <table>
    <tr>
      <th>銀行</th>
      <th>額度</th>
      <th>日額度</th>
      <th>月額度</th>
      <th>還有啥額度</th>
    </tr>
    <tbody id="quota"></tbody>
  </table>
</body>

以上所述是小編給大家介紹的JS實現(xiàn)點擊Radio動態(tài)更新table數(shù)據(jù)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

關(guān)于webpack代碼拆分的解析
本篇文章主要介紹了關(guān)于webpack代碼拆分的解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
js實現(xiàn)動態(tài)加載腳本的方法實例匯總
這篇文章主要介紹了js實現(xiàn)動態(tài)加載腳本的方法,以實例形式匯總并分析了幾種常用的JavaScript動態(tài)加載腳本的技巧,非常具有實用價值,需要的朋友可以參考下
2015-11-11
淺談Javascript數(shù)組(推薦)
數(shù)組，即Array類型，是開發(fā)中最常用的類型之一。這篇文章主要介紹了淺談Javascript數(shù)組的相關(guān)資料,需要的朋友可以參考下
2016-05-05
js控制frameSet示例
修改frameset的cols屬性來達到修改各個頁面所占的寬高，例如隱藏當前frame頁等等，感興趣的朋友可以了解下
2013-09-09
ionic實現(xiàn)底部分享功能
這篇文章主要為大家詳細介紹了ionic實現(xiàn)底部分享功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
JGrid中拖動改變列寬的腳本原型
JGrid 中，可以拖動改變列寬，簡單的原理就是改變相應的 col 的 style.width 今天看到skybot 同學在問這個問題，就又把這個功能拿出來，單獨實現(xiàn)了一下（有改進）
2008-07-07
ES6知識點整理之String字符串新增常用方法示例
這篇文章主要介紹了ES6知識點整理之String字符串新增常用方法,結(jié)合實例形式分析了ES6字符串String includes,startsWith,endsWith等方法相關(guān)使用技巧,需要的朋友可以參考下
2019-07-07
js DNA動態(tài)序列比對代碼
JavaScript動態(tài)序列比對代碼，隨便寫著玩的，在網(wǎng)上見到用VC、VB寫的比較多，這個算法以前在高中課本上見到過，我只是用Js寫一下試試，或許還不是太準確。
2010-07-07
《JavaScript高級程序設(shè)計》閱讀筆記（二） ECMAScript中的原始類型
ECMAScript有5種原始類型(primitive type)，即Undefined、Null、Boolean、Number和String。ECMAScript提供了typeof來判斷值的類型
2012-02-02
js 文本框里粘貼一個圖片url并顯示
不錯的應用，一般用于開發(fā)系統(tǒng)中，圖片新聞，直接顯示圖片
2008-08-08