帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 表格table动态添加行和列效果
表格table动态添加行和列效果
浏览:429次
-
评论:1次
-
发布时间:2022-05-19
Html
Css
Js
+
参数名
+
.table-bordered { border-width:1px; border-style:solid; border-color:rgb(221,221,221); border-image:initial; } table { max-width:100%; background-color:transparent; border-collapse:collapse; border-spacing:0px; text-indent:initial; } tbody { display:table-row-group; vertical-align:middle; border-color:inherit; } .text-danger { color:#000; font-size:18px; } tr { display:table-row; vertical-align:inherit; border-color:inherit; } .table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td { border-width:1px; border-style:solid; border-color:rgb(221,221,221); border-image:initial; } .table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td { line-height:20px; vertical-align:top; padding:8px; } .text-center { text-align:center; } td { display:table-cell; vertical-align:inherit; width:146px; } .btn-sm { font-size:12px; border-radius:3px; height:20px; line-height:20px; } .btn-primary { color:rgb(255,255,255); background-color:rgb(66,139,202); border-color:rgb(53,126,189); } .btn { display:inline-block; margin-bottom:0px; font-size:14px; font-weight:normal; line-height:20px; text-align:center; white-space:nowrap; vertical-align:middle; cursor:pointer; background-image:none; user-select:none; padding:6px 12px; border-width:1px; border-style:solid; border-color:transparent; border-image:initial; border-radius:4px; } .btn-danger { color:rgb(255,255,255); background-color:rgb(217,83,79); border-color:rgb(212,63,58); } .form-control { display:block; width:100%px; height:24px; padding:3px 2px; font-size:14px; line-height:24px; color:#333; vertical-align:middle; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgb(0 0 0 / 8%); box-shadow:inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .sel_mask { width:36px; height:28px; border-radius:5px; box-shadow:1px 1px 5px rgb(66,139,202); text-decoration:none; }
//添加行 function addRow() { let rols = $("#myTable tr"); let rowNum = rols.length; let lastNum = rowNum - 1; let tdNowLen = rols.eq(0).children().length; let content = '
'; for (let i = 0; i < tdNowLen; i++) { if (i === 0) { content += "
参数名
"; } else if (i === tdNowLen - 1) { content += '
-
'; } else { content += '
'; } } content += "
"; let lastTr = "
" + $("#myTable").find("tr").eq(lastNum).html() + "
"; $("#myTable").find("tr").eq(lastNum).remove(); $("#myTable").append(content); $("#myTable").append(lastTr); } //添加列 function addRol() { let rols = $("#myTable tr"); let tdNowLen = rols.eq(0).children().length; if (tdNowLen > 12) { alert("住手,已经装不下啦~~"); return; } let rowNum = rols.length; let maxColspan = 1; for (let i = 0; i < rowNum; i++) { let tds = rols.eq(i).children(); let tdLen = tds.length; let lastTdNum = tdLen - 1; let lastTr = tds.eq(lastTdNum).html(); if (i === 0) { let content = '
参数值
-
'; tds.eq(lastTdNum).remove(); rols.eq(i).append(content); rols.eq(i).append('
' + lastTr + '
'); maxColspan = rols.eq(i).children().length; } else if (i === (rowNum - 1)) { rols.eq(i).children().eq(0).attr("colspan", maxColspan); } else { let content = '
'; tds.eq(lastTdNum).remove(); rols.eq(i).append(content); rols.eq(i).append("
" + lastTr + "
"); } } } function delRow(obj) { obj.parentNode.parentNode.remove(); } function delRol(obj) { let col = obj.parentNode.cellIndex; let rols = $("#myTable tr"); let rolNum = rols.length; for (let i = 0; i < rolNum; i++) { rols.eq(i).children().eq(col).remove(); } let lastTr = rols.eq(rolNum - 1).children().eq(0); let colspan = lastTr.attr("colspan"); lastTr.attr("colspan", (colspan - 1)); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>表格table动态添加行和列效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:table动态添加行和列代码
简易版JS二级联动效果代码
可设置画笔粗细颜色的Canvas画板效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv9 码圣
wx***75
2022年07月19日
这个功能挺好
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
429
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值