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


Posted in jQuery onJuly 31, 2019

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

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

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

<html>
<head>
    <title>table添加/删除行</title>
</head>
<body>
<table id="testTbl" border=1>
    <tr>
        <td>性别</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>
            <select name="a">
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
        </td>
        <td>
            <input type="text" name="b">
        </td>
        <td>
            <input type="text" name="c">
        </td>
    </tr>
</table>
<input type="button" name="Submit2" value="添加" onclick="addRow()">
<script>
function addRow(){
    //添加行
    var newTr = testTbl.insertRow();
    //添加列
    var newTd0 = newTr.insertCell();
    var newTd1 = newTr.insertCell();
    var newTd2 = newTr.insertCell();
    var newTd3 = newTr.insertCell();
    //设置列内容和属性
    newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;
    newTd1.innerText = document.all("b").value;
    newTd2.innerText = document.all("c").value;
    newTd3.innerHTML= '<input type="button" name="del" value="删除" οnclick="del(this)">';
}
function del(o){
    //获取表格
    var t=document.getElementById('testTbl');
    //删除当前行
    t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>
//动态添加行
function addRow(){
  var table = document.getElementById("tableID");
  var newRow = table.insertRow(); //创建新行
  var newCell1 = newRow.insertCell(); //创建新单元格
  newCell.innerHTML = ""; //单元格内的内容
  newCell.setAttribute("align","center"); //设置位置
}
//动态删除行
function deleteRow(){
  var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
  var styles = document.getElementById("tableID");
  styles.deleteRow(rowIndex);
}

用克隆的方式

<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var index = 0;
$(document).ready(function(){
 $("button").click(function(){
 index++;
  $("body").append($("p").clone().attr({'id':'name'+index,'name':'pwd'+index}));
 });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>复制每个 p 元素,然后追加到 body 元素</button>
</body>
</html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 </head>
 <body>
  <a href = "javascript:void(0);" οnclick="a();">添加</a>
  <a href = "javascript:void(0);" οnclick="b();">显示</a>
  <table id = "tab"></table>
 </body>
<script type="text/javascript">
    var index = 0;
    var a = function(){
        index++;
        var tab = "<table id = 'tab_"+index+"' border = '1' >";
        tab += "<tr><td colspan = '6' align = 'center'>尺寸规格</td></tr>";
        tab += "<tr><td>长度</td><td><input οnblur='b("+index+");' id = 'cd_"+index+"' /></td><td align = 'right'>宽度</td><td><input οnblur='b("+index+");' id = 'kd_"+index+"' /></td><td>数量(个)</td><td><input οnblur='c("+index+");' id = 'sl_"+index+"' /></td></tr>";
        tab += "<tr><td>摆放区域</td><td><input id = 'bfqy_"+index+"' /></td><td>单个面积(平方米)</td><td><input readonly = 'readonly' id = 'dgmj_"+index+"' /></td><td>总面积</td><td><input readonly = 'readonly' id = 'zmj_"+index+"' /></td></tr>";
        tab += "<tr><td>内容描述</td><td colspan = '4'><textarea rows='3' cols='70' id = 'content_"+index+"' ></textarea></td><td><input type = 'button' value = '删除' onclick = 'del("+index+");' id = 'del_"+index+"' /></td></tr>";
        tab += "</table>";
        $('#tab').append(tab);
    }
    function del(ind){
        $('#tab_'+ind).remove();
    }
    function b(ind){
        var cdd = $('#cd_'+ind).val();
        var kdd = $('#kd_'+ind).val();
        if(cdd==''){cdd = 1;}
        if(kdd==''){kdd = 1;}
        if(cdd==''&&kdd==''){
            $('#dgmj_'+ind).val('');
        }else{
            $('#dgmj_'+ind).val(cdd * kdd);
        }
    }
    function c(ind){
        var cdd = $('#cd_'+ind).val();
        var kdd = $('#kd_'+ind).val();
        var sll = $('#sl_'+ind).val();
        if(cdd==''){cdd = 1;}
        if(kdd==''){kdd = 1;}
        if(sll==''){sll = 1;}
        if(cdd==''&&kdd==''&&sll==''){
            $('#zmj_'+ind).val('');
        }else if(cdd!=''&&kdd!=''&&sll!=''){
            $('#zmj_'+ind).val(cdd * kdd * sll);
        }else{
            $('#zmj_'+ind).val('');
        }
    }
</script>
</html>

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

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

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
jquery.pager.js分页实现详解
Jul 29 #jQuery
jquery.pager.js实现分页效果
Jul 29 #jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
jquery插件开发模式实例详解
Jul 20 #jQuery
You might like
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
vue-router定义元信息meta操作
2020/12/07 Vue.js
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python实现学生管理系统开发
2020/07/24 Python
中软Java笔试题
2012/11/11 面试题
网络体系结构及协议的定义
2014/03/13 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
信用卡工作证明模板
2014/09/14 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
优秀团支部申报材料
2014/12/26 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
幸福来敲门观后感
2015/06/04 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL