JS实现点击Radio动态更新table数据
作者:窗边听雨时间:2026-10-23 01:12:10浏览:497
本文介绍如何利用jQuery监听Radio按钮的点击事件,根据选中值从预设数据对象中获取信息,并动态拼接HTML字符串。通过修改tbody的innerHTML或html方法,实现表格数据的实时无刷新更新,适用于简单的表单交互场景。
HTML结构准备
首先,在HTML结构中为表格的tbody部分定义一个唯一的标识标签,例如设置id属性,以便后续通过JavaScript定位该区域。
JavaScript动态更新逻辑
当用户点击Radio按钮触发变化时,在JavaScript代码中获取当前选中项的值。根据该值从预设的数据源中提取对应的信息,拼接生成包含表格行数据的HTML字符串。最后,将拼接好的HTML字符串赋值给tbody元素的innerHTML属性(或调用jQuery的html方法),从而完成表格内容的动态更新。
<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数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!
作者最新文章
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
