JS/jQuery实现超简单的Table表格添加,删除行功能示例

2023-08-18 09:07:06 76

本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能。分享给大家供大家参考，具体如下：

最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢!

需要的拿去,转载请在明显的位置标注出出处!!!



table添加/删除行




性别
姓名
年龄




男
女

//动态添加行
functionaddRow(){
vartable=document.getElementById("tableID");
varnewRow=table.insertRow();//创建新行
varnewCell1=newRow.insertCell();//创建新单元格
newCell.innerHTML=""；//单元格内的内容
newCell.setAttribute("align","center");//设置位置
}
//动态删除行
functiondeleteRow(){
varrowIndex=event.srcElement.parentElement.parentElement.rowIndex;
varstyles=document.getElementById("tableID");
styles.deleteRow(rowIndex);
}

用克隆的方式





varindex=0;
$(document).ready(function(){
$("button").click(function(){
index++;
$("body").append($("p").clone().attr({'id':'name'+index,'name':'pwd'+index}));
});
});



Thisisaparagraph.

下面是直接添加和删除当前table表格,很好用




"rel="externalnofollow">









添加
显示



varindex=0;
vara=function(){
index++;
vartab="";
tab+="尺寸规格";
tab+="长度宽度数量(个)";
tab+="摆放区域单个面积(平方米)总面积";
tab+="内容描述";
tab+="";
$('#tab').append(tab);
}
functiondel(ind){
$('#tab_'+ind).remove();
}
functionb(ind){
varcdd=$('#cd_'+ind).val();
varkdd=$('#kd_'+ind).val();
if(cdd==''){cdd=1;}
if(kdd==''){kdd=1;}
if(cdd==''&&kdd==''){
$('#dgmj_'+ind).val('');
}else{
$('#dgmj_'+ind).val(cdd*kdd);
}
}
functionc(ind){
varcdd=$('#cd_'+ind).val();
varkdd=$('#kd_'+ind).val();
varsll=$('#sl_'+ind).val();
if(cdd==''){cdd=1;}
if(kdd==''){kdd=1;}
if(sll==''){sll=1;}
if(cdd==''&&kdd==''&&sll==''){
$('#zmj_'+ind).val('');
}elseif(cdd!=''&&kdd!=''&&sll!=''){
$('#zmj_'+ind).val(cdd*kdd*sll);
}else{
$('#zmj_'+ind).val('');
}
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS/jQuery实现超简单的Table表格添加,删除行功能示例

热门推荐

随机推荐