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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 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 intval的测试代码发现问题
2008/07/27 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
旅游管理专业学生求职信
2013/09/28 职场文书
新领导上任欢迎词
2014/01/13 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
房屋产权证明书
2014/10/15 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
四年级作文之植物
2019/09/20 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技