编写js实现表格内容的行添加与行删除

最新推荐文章于 2022-11-19 09:22:57 发布
最新推荐文章于 2022-11-19 09:22:57 发布
阅读量323 收藏 2
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45696288/article/details/111588182
版权

实用版代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../js/jquery-1.12.4.js"></script>

<style>
    .table {
       position: relative;
       width: 650px;
       height: auto;
       margin: auto;
       border: 1px solid red;
    }
    .table .add {
        position: absolute;
        left :50px;
        bottom: -50px;
    }
    .table tbody{
        text-align: center;
    }
</style>



</head>
<body>

        <div class="table">
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>学校所属院系</th>
                        <th>信息删除（小心行事哦）</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>JavaScript</td>
                        <td>信息工程系</td>
                        <td><a href="javascrip:;" class="del">删除</a></td>
                      </tr>
                </tbody>
                <div class="add"> 
                    <div>请输入你要添加的信息：</div>
                    姓名：<input type="text" class="one">
                    所属院系：<input type="text" class="two">
                    <input type="button" value="添加" class="only">
                </div>
            </table>
        </div>




<script>
       $('.table .add .only').click(function(){
        var text1 = $('.one').val();
        var text2 = $('.two').val();
        var con=$('<tr><td>' + text1 + '</td><td>' + text2 + '</td><td><a href="javascrip:;" class="del">删除</a></td></tr>');
        $('.table tbody').append(con);
        $('.one').val('');
        $('.two').val('');
       });

       $('tbody').on('click','.del',function(){
            $(this).parent().parent().remove();
       });
</script>
    
</body>
</html>

在这里插入图片描述

简便版代码：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery动态添加和删除数据</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="../js/jquery-1.12.4.js"></script>
  </head>
  <body>
      <div>
        课程名称：<input type="text" id="tname">
        所属学院：<input type="text" id="tdep">
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">
      </div>
      <table id="j_tb">
       
          <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
          </tr>
          <tr>
            <td>JavaScript</td>
            <td>信息工程系</td>
            <td><a href="javascrip:;" class="del">删除</a></td>
          </tr>
          <tr>
            <td>css</td>
            <td>信息工程系</td>
            <td><a href="javascrip:;" class="del">删除</a></td>
          </tr>
          <tr>
            <td>html</td>
            <td>信息工程系</td>
            <td><a href="javascrip:;" class="del">删除</a></td>
          </tr>
          <tr>
            <td>jQuery</td>
            <td>信息工程系</td>
            <td><a href="javascrip:;" class="del">删除</a></td>
          </tr>

      </table>

    <script>
        $('#j_btnAddData').click(function() {
            var lesson = $('#tname').val();
            var belSch = $('#tdep').val();
            // 创建行  拼接字符串,添加到tbody中
            var con=$('<tr><td>' + lesson + '</td><td>' + belSch + '</td><td><a href="javascrip:;" class="del">删除</a></td></tr>');
            $('#j_tb').append(con);
            // 清空课程的文本框
            $('#tname').val('');
            $('#tdep').val('');
        });
        // 获取tbody中的元素,绑定单击事件
        $('#j_tb').on('click', '.del', function () {
            // 删除tr
            $(this).parent().parent().remove();
        });
        // $('.del').click(function(){
        //     // 删除tr
        //     $(this).parent().parent().remove();
        // });




    </script>
  </body>
</html>

在这里插入图片描述

最低配置版本：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 100px;
            background: #27d1ff;
        }
    </style>
    <script src="../js/jquery-1.12.4.js"></script>
  </head>
  <body>
    <input type="text" class="txt"><br><br>
    <input type="button" value="添加" class="btn1">
    <div></div>
  
    <script>
        $('.btn1').click(function() {
            
            $('div').text($('.txt').val());
            $('.txt').val('');
        });
    </script>
  </body>
</html>

在这里插入图片描述

爱睡觉的小馨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery实现表格行和列的动态添加与删除方法【测试可用】
10-21
本文将详细讲解如何使用jQuery实现表格行和列的动态添加与删除功能，这对于创建交互式数据展示页面至关重要。 首先，我们需要一个基本的HTML结构来承载表格。下面的代码展示了这样一个表格： ```html 序号 (1...
JQuery实现表格动态增加行并对新行添加事件
10-25
4. 实现清除行数据的函数，用于删除或重置单元格的内容。 5. 考虑在表格达到一定数量的行时，限制继续添加新行，以防止页面过于拥挤。 总的来说，这个示例展示了如何利用jQuery实现表格的动态扩展，并通过事件处理...
js、table表格 插入、新增、删除自定义行
qiang928的博客
11-19 2327
js、table表格 插入、新增、删除自定义行
纯JS table动态增加行
Everyone_boy的博客
08-21 7812
JS代码： function addRow(tableId) { var tb=document.getElementById(tableId); var tbRows=tb.rows; var newTr=tb.insertRow(tbRows.length); newTr.align="center"; var newTd0=newTr.insertCell(0); var newTd1=newTr.insertCell(1); var newTd2=newTr.insertCel
深入理解jquery新的绑定事件机制on方法的使用
weixin_33738578的博客
02-27 128
jQuery 推出on()的目的有2个，一是为了统一接口，二是为了提高性能，所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用one()吧，这个没有变化。 开始的时候写的代码如下，发现新生成...
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
han_han__的博客
09-11 2632
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
js添加行
wm_java的博客
07-04 127
function addRow(obj) { var a = obj.parentNode.parentNode.id; var signFrame = findObj("mainTable", document); var r = jQuery(".tbody").children().length; var newTR = signFrame.insertRow...
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
以下是如何使用JS实现动态表格的添加、修改和删除功能。 首先，我们需要在HTML页面中设置一个基本的表格结构。例如，给定的代码片段创建了一个表格，包含参数名称、参数编码、参数值和一个操作列。操作列通常用于...
jQuery通过点击行来删除HTML表格行的实现示例
10-25
本示例主要讲解如何使用jQuery实现一个功能：当用户点击HTML表格的某一行时，该行会以一种有视觉效果的方式（如淡出）被删除。这对于创建动态交互的网页界面非常有用，尤其是对于那些需要用户进行数据操作的应用。 ...
jQuery自定义添加删除表格行内容特效.zip
最新发布
09-21
本项目“jQuery自定义添加删除表格行内容特效”是基于jQuery实现的一种交互式功能，它允许用户动态地在表格中添加和删除行，大大提升了用户体验。下面将详细介绍这一功能的实现原理和关键代码。 首先，我们需要理解...
用js实现的动态添加一行
06-04
用js实现的动态添加一行 支持firefox IE学习ajax的基础练习
js简单的表格添加行和删除行操作示例
12-10
代码如下: <html> <head> [removed][removed] [removed] //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(function(){ //绑定添加行按钮的单击事件 $(“#addrow”).bind(“click”,function(){ // 取得table var tab = $(“#ta
js动态添加行和删除行
08-24
js动态添加行和删除行
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
简单的js添加删除行
02-23
本例实现自动添加删除行的功能，功能简单了点，但是很好用希望对大家帮助
js增加行
tgyd2006的专栏
09-27 218
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt; New Document &lt;/TITLE&gt;&lt;META NAME="Generator" CONTENT="EditPlus"&
js动态添加行
weixin_34367257的博客
06-15 922
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> select { width: 200px; } </styl...
用js实现表格行的动态添加与删除
weixin_30598225的博客
04-14 726
对应的html代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.min.js">&l...
HTML中如何删除表格所以的已添加的行
06-08
要删除HTML表格中的所有已添加行，可以使用JavaScript编写一个函数来执行此操作。以下是一个示例函数： ```javascript function clearTable() { var table = document.getElementById("myTable"); // 获取表格引用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱睡觉的小馨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值