帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery表格行与列的动态增加和删除,附获取表格内容(字符串、json)格式
jQuery表格行与列的动态增加和删除,附获取表格内容(字符串、json)格式
浏览:699次
-
评论:1次
-
发布时间:2020-09-12
Html
Css
Js
0
至
* { margin:0; padding:0; border:0; } table { width:100%; margin:20px auto; border-collapse:collapse; } table tr td { border:2px solid rosybrown; height:32px; } table tr td input { width:100%; height:100%; } #addrow,#detrow,#addcol,#detcol,#getstr,#getstrJson { display:block; line-height:40px; font-family:"Arial Black"; background:#808000; width:100px; margin:20px auto; margin-left:20px; border:2px solid black; box-shadow:3px 3px 5px #b9b9b9; float:left; }
$(document).ready(function() { //增加一行 $("#addrow").click(function() { var tdAmt = $("tbody tr:last-child input").val(); if (tdAmt != '') { //克隆上一行 $("tbody tr:last-child").clone().appendTo("#table tbody"); //将上一行区间数据赋值 $("#table tbody tr:last").find("span").html(tdAmt); //将行尾克隆的值清空 $("#table tbody tr:last").find(":input").val(''); } else { alert("上一行区间金额不允许空"); } }); //删除一行 $("#detrow").click(function() { var index = $("#table tr:last-child").index(); if (index > 0) { $("#table tr:last-child").remove(); } else { alert("表格第一行不能删除!"); return false; } }); //增加一列 $("#addcol").click(function() { var tr = $("#table tr"); //所有tr元素 tr.each(function(index) { $(this).append("
") }) }); //删除一列 $("#detcol").click(function() { var colTable = $("#table").find("tr"); var trLen = colTable.eq(0).find("td").length; //列数 colTable.each(function(i) { if (trLen > 1) { colTable.eq(i).find("td").eq(0).remove(); } else { alert("表格第一列不能删除!"); return false; } }); }); //获取字符串内容 $("#getstr").click(function() { var str = ""; var trLen = $("#table tbody tr").length; for (var i = 0; i < trLen; i++) { var tr = $("#table tbody").find("tr").eq(i); //获取每一行tr var tdLen = $(tr).find("td").length; for (var j = 0; j < tdLen; j++) { td = $(tr).find("td input").eq(j); //获取每行td var dir = $(tr).find("input").eq(j).val(); str = str + dir + "," } str = str + "|" //换行 } alert(str); }); //获取Json内容 $("#getstrJson").click(function() { var jsonStr = "{["; $('#table tbody').find('tr').each(function(id) { jsonStr += "{"; $(this).find('td').each(function() { $(this).find('input').each(function() { //获取td中input的值 jsonStr += "\"td" + id + "\":\"" + $(this).val() + "\","; }) }) jsonStr = jsonStr.substring(0, jsonStr.length); jsonStr += "},"; }) jsonStr = jsonStr.substring(0, jsonStr.length); jsonStr += "]}"; alert(jsonStr); }); //监控第一列input值变化 });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.7.2
<!doctype html><html><head><meta charset="utf-8"><title>jQuery表格行与列的动态增加和删除,附获取表格内容(字符串、json)格式-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:在项目中很多时候遇到这样的问题需要动态的增加、删除表格的行与列,在学习jQuery的过程中,自己试着在网上找寻教程,发现都不符合自己的需要,所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一行与最后一列,获取表格内填写的input数据(最简洁的代码实现)
实现动态增加 删除最后一行与最后一列,获取表格内填写的input数据.
具体功能都已经添加按钮到页面上显示
最基本的移动端原生js点名系统
jQuery自定义多选下拉框
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv2 入门
qq***02
2021年01月01日
动态表格,代码思路清晰
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
699
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值