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数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
详解PHP中的 input属性(隐藏 只读 限制)
隐藏 <input type="hidden"> 只读 <input type="text" readonly> 失效 <input type="text" disabled> 限制 <input type="text" maxlength="1"> ENTER键让光标移到下一个输入框 <input onkeydown="if(event.ke
-
angularJs中datatable实现代码
本文介绍了angularJs中datatable实现,有需要的小伙伴可以参考下 html引用derective: 复制代码 代码如下: <table datatable dtOptions="dtOptionsExample2" class="table table-striped m-b-none"></table> controller设置: $scope.dtOptions = { "bProcessing": tr
-
js操作table元素实现表格行列新增、删除技巧总结
本文实例讲述了js操作table元素实现表格行列新增.删除的方法.分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **********************************************************
-
jquery.tableSort.js表格排序插件使用方法详解
本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &
-
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
正文 前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案 JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面"惨淡的bug",于
-
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
-
vue.js 实现点击按钮动态添加li的方法
如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="
-
动态更新highcharts数据的实现方法
动态更新highcharts数据的实现方法 <!doctype html> <html> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="htt
-
JS实现点击上移下移LI行数据的方法
本文实例讲述了JS实现点击上移下移LI行数据的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript排序功能,点击按钮实现数据的上移和下称,一共有两组测试效果,上组采用箭头图标控制的方式,更美观,下组是直接使用文字,根据你的需要自行选择.myList为ul的id值,m为0显示文字,m为1显示图片,mO.mT为文字或图片内容. 演示效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
-
JS动态创建Table,Tr,Td并赋值的具体实现
成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table 概要代码如下:JS 复制代码 代码如下: //动态获取主题数据 function getzts(){ parentId = document.getElementById("bselect1").value; if(parentId!=""){
-
解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这样就解决了表格中方缩略图空间不足的问题. Viewer.js 是一款强大的图片查看器 Viewer.js 特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支
-
js简单实现表单中点击按钮动态增加输入框数量的方法
本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
-
JS动态添加Table的TR,TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t
-
JS实现动态修改table及合并单元格的方法示例
本文实例讲述了JS实现动态修改table及合并单元格的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-
-
JS效率个人经验谈(8-15更新),加入range技巧
首先,要谢谢CSDN hbhbhbhbhb1021(天外水火(我要多努力))和cuixiping(无心)的提醒.我会抽空把IE专有的方法如:insertAdjacentHTML的速度也给测出来看看是否合适大量数据时IE下,不用innerHTML的速度.这里的主要测试不是指生成数据时的速度,指的是匹配速度 ,例如我这里的匹配速度我测的10000条数据,有效数据为1000-1100条,输出复杂的HTML,速度为360ms左右,方法为 正则匹配Match(有循环)希望贴出您的测试数据.行innerHT
随机推荐
- js实现兼容IE和FF的上下层的移动
- 详解Nginx服务器中配置超时时间的方法
- 关于iOS中的各种颜色设置总结大全(推荐)
- Bootstrap的modal拖动效果
- C#正则用法两例
- php实现用于删除整个目录的递归函数
- Python smallseg分词用法实例分析
- C语言实现图的搜索算法示例
- C3P0连接池+MySQL的配置及wait_timeout问题的解决方法
- 怎么使 Mysql 数据同步
- jquery 提示信息显示后自动消失的具体实现
- Android Intent发送广播消息实例详解
- 一段好玩的JavaScript代码
- PureFTPd+Mysql+PHP_Manager实现虚拟用户磁盘限额的配置方法
- linux下mysql数据库的操作的方法
- java制作带界面的聊天工具
- 一个简易需要注册的留言版程序
- python 计算数组中每个数字出现多少次--“Bucket”桶的思想
- Python subprocess模块详细解读
- java泛型类的定义与使用详解