用JavaScript实现对表格的增删改与上移、下移、增加、减少功能

最新推荐文章于 2024-08-06 17:19:59 发布
最新推荐文章于 2024-08-06 17:19:59 发布
阅读量1.3k 收藏 12
点赞数 1
文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52312040/article/details/120689309
版权

用JavaScript实现对表格的增删改与上移、下移、增加、减少功能
学了几个星期的JS实现了对表格的增删改以及其他操作，来检验自己的学习成果。

效果图：
在这里插入图片描述

下面代码含有jquery，所以要导入jquery的模块，并且改一下：
附上源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩</title>
</head>
<style>
    * {
        margin: 2px;
    }

    body {
        background-color: rgb(227, 227, 219);
    }

    .main {
        width: 500px;
        height: 100%;
        background-color: rgb(183, 218, 246);
        margin-left: 380px;
    }

    .div1 {
        padding-top: 50px;
        margin-left: 111px;
    }

    .div2 {
        margin-top: 20px;
        margin-left: 75px;
        padding-bottom: 70px;
    }

    table {
        border: 1px gray solid;
        border-spacing: 0px;
        border-collapse: collapse;
        text-align: center;
    }

    table .tr1 {
        background-color: antiquewhite;
    }

    table td {
        border: 1px gray solid;
        padding: 5px;
    }

    img {
        width: 25%;
        height: 25%;
        display: inline;
    }

    .b1 {
        font-size: 25px;
        margin-left: 225px;
    }

    .table-operation {
        width: 150px;
        height: 70px;
    }
</style>

<body>
   <!--  <img src="logo.png" alt=""> -->
    <b class="b1">学生成绩表</b>
    <div class="main">
        <div class="div1">
            <b>姓名:</b>
            <input type="text" id="ipt1" class="ipt"><br>
            <b>科目:</b>
            <select name="type" type="text" id="ipt2" class="ipt">
                <option velue="javascript">javascript</option>
                <option value="HTML">HTML</option>
                <option value="计算机组成原理">计算机组成原理</option>
                <option value="高等数学">高等数学</option>
                <option value="大学英语">大学英语</option>
                <option value="算法与数据结构">算法与数据结构</option>
            </select><br>
            <b>成绩:</b>
            <input type="text" id="ipt3" class="ipt"><br>
            <button id="btn" style="margin-left:175px;">提交</button>
        </div>
        <div class="div2">
            <table id="tb">
                <tbody id="to">
                    <tr class="tr1" id="row0">
                        <td>姓名</td>
                        <td>科目</td>
                        <td>成绩</td>
                        <td>操作</td>
                    </tr>
                    <tr class="tr1">
                        <td>张三</td>
                        <td>javascript</td>
                        <td>90</td>
                        <td class='table-operation'>
                            <input type='button' value='删除' class='remove'>
                            <input type='button' value='修改' class="modify">
                            <input type='button' value='上移' class='up'>
                            <input type="button" value="增加" class="z">
                            <input type="button" value="减少" class="j">
                            <input type='button' value='下移' class='down'>
                        </td>
                    </tr>
                    <tr class="tr1">
                        <td>李四</td>
                        <td>javascript</td>
                        <td>99</td>
                        <td class='table-operation'>
                            <input type='button' value='删除' class='remove'>
                            <input type='button' value='修改' class="modify">
                            <input type='button' value='上移' class='up'>
                            <input type="button" value="增加" class="z">
                            <input type="button" value="减少" class="j">
                            <input type='button' value='下移' class='down'>
                        </td>
                    </tr>
                    <tr class="tr1">
                        <td>王五</td>
                        <td>javascript</td>
                        <td>95</td>
                        <td class='table-operation'>
                            <input type='button' value='删除' class='remove'>
                            <input type='button' value='修改' class="modify">
                            <input type='button' value='上移' class='up'>
                            <input type="button" value="增加" class="z">
                            <input type="button" value="减少" class="j">
                            <input type='button' value='下移' class='down'>
                        </td>
                    </tr>
                    </tobody>
            </table>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>

        // 增加+1
        $(document).on('click', '.z', function () {
            var o = document.getElementsByClassName("tr1");
            var a = $(".z").index(this) + 1;
            o[a].children[2].innerHTML = parseInt(o[a].children[2].innerHTML) + 1;
        });

        //减少-1
        $(document).on('click', '.j', function () {
            var o = document.getElementsByClassName("tr1");
            var a = $(".j").index(this) + 1;
            o[a].children[2].innerHTML = parseInt(o[a].children[2].innerHTML) - 1;
        });

        // 上移动
        $(document).on('click', '.up', function () {
            var ind = $(this).parents('tr').index();
            console.log(ind);
            if (ind == 1) {
                alert('已经是最上层了！');
                return false;
            }
            var trs = $(this).parents('tr').clone(true);
            console.log(trs);

            $(this).parents('table tbody').find('tr').eq(ind - 1).before(trs);
            $(this).parents('tr').remove();
            //重新添加序号
            drawOrder()
        });
        //下移动
        $(document).on('click', '.down', function () {
            var ind = $(this).parents('tr').index();
            if (($(this).parents("tr").index()) == ($(this).parents("table tbody").find("tr").length - 1)) {
                alert('已经是最下层了！');
                return false;
            }
            var trs = $(this).parents('tr').clone(true);
            $(this).parents('table tbody').find('tr').eq(ind + 1).after(trs);
            $(this).parents('tr').remove();
            //重新添加序号
            drawOrder();
        });
        //==================================================================== 
        var ipt = document.getElementsByClassName("ipt");
        var btn = document.getElementById("btn");
        var tb = document.getElementById("tb");
        var btn2 = document.getElementsByClassName("btn-default");
        var ipt1 = document.getElementById('ipt1')
        var ipt3 = document.getElementById('ipt3')


        function fun() {
            // 判断姓名、成绩是否合法
            if (ipt1.value.length > 0 && ipt1.value.length < 6 && Number.parseFloat(ipt3.value) >= 0 && Number.parseFloat(ipt3.value) <= 100) {
                // console.log(typeof ipt1.value);
                // console.log(ipt1.value.length);
                console.log(Number.parseFloat(ipt3.value));
                var newTr = tb.insertRow();
                var newTd0 = newTr.insertCell();
                var newTd1 = newTr.insertCell();
                var newTd2 = newTr.insertCell();
                var newTd3 = newTr.insertCell();

                var to = document.getElementById('to')
                newTr.className = "tr1"
                console.log(newTr);
                newTd0.innerText = ipt[0].value;
                newTd1.innerText = ipt[1].value;
                newTd2.innerText = ipt[2].value;
                newTd3.innerHTML = "<input type='button' value= '删除'  class = 'remove'> <input type='button' value='修改' class='modify'>    <input type='button' value='上移' class='up'>  <input type='button' value='增加' id='zj' class='z'> <input type='button' value='减少' class='j'>  <input type='button' value='下移' class='down'> ";
                console.log(newTd2);

                // 点击提交后 消除除了科目表单的input
                for (let j = 0; j < ipt.length; j++) {
                    if (j == 1) {
                        continue;
                    } else {
                        ipt[j].value = "";
                    }
                }
                ipt[0].focus();
            } else {
                if (ipt1.value.length < 1) {
                    alert('姓名不能为空!')
                }
                if (ipt1.value.length > 5) {
                    alert('姓名太长了！');
                }
                if (Number.parseFloat(ipt3.value) < 0 || Number.parseFloat(ipt3.value) > 100) {
                    alert('成绩只能在1~100以内！')
                }
            }
            // console.log("姓名 " + ipt1.value.length + typeof ipt.value);

        }
        btn.onmouseup = fun;
        //获取光标  
        ipt[0].focus();
        //回车换行
        ipt[0].onkeyup = function (ev) {
            if (ev.key == "Enter") {
                ipt[2].focus();
            }
        }
        ipt[2].onkeyup = function (ev) {
            if (ev.key == "Enter") {
                fun();
            }
        }
        //删除操作  jquery
        $(document).on('click', '.remove', function () {
            if (window.confirm("您确定要删除数据吗?")) {
                $(this).parent().parent().remove();
            }
        })

        //修改操作 
        $(document).on('click', '.modify', function () {
            // console.log($(this).val());
            if ($(this).val() == '修改') {
                $(this).parent().siblings("td").each(function () {
                    var is_text = $(this).find("input:text");//判断单元格下是否含有文本框
                    if (!is_text.length) {
                        $(this).html("<input size = '2' type='text'  class='t' value=' " + $(this).text() + " ' />");
                    }
                    else { $(this).html(is_text.val()); }
                })
                $(this).val("保存");
            } else {
                $(this).parent().siblings("td").each(function () {
                    var is_text = $(this).find("input:text");//判断单元格下是否含有文本框
                    if (!is_text.length) {
                        $(this).html("<input size = '2' type='text'  class='t' value=' " + $(this).text() + " ' />");
                    }
                    else { $(this).html(is_text.val()); }
                })
                $(this).val("修改");
            }
        });
    </script>
</body>

</html>
韩wu
关注
使用js实现 表的 “增删改查上下移动” 功能
m0_46862838的博客
09-25 1055
要实现图片中的的效果，废话不多说直接上代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&.
使用jQuery对表格实现增、删、改、查
qq_54000867的博客
12-04 5991
需求： 下面输入框输入框输入数据，点击增加按钮，将数据添加至表格末尾，id实现自增 在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示 点击删除超链接，删除对应的行 点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接 运行结果 HTML代码： <input type="text" /> <input t
js表格上下移动添加删除
weixin_30417487的博客
04-12 243
html部分 <div onclick='fn()'>加</div> <table width="250" border="1" > <tbody id="div"> <tr> <td width="25%">1</td> <td width="25...
js实现表格数据渲染，表格数据新增，修改，删除。
最新发布
qq_37432625的博客
08-06 232
【确认】：表格中输入框变为纯文本数据。（注：这里修改了原始数据）5.上下翻页：（默认设置一页展示5条），根据数据动态设置翻页功能。4.点击【修改】表格中文本变成对应输入框。1.点击【查询】根据给定条件进行查询。3.根据js中初始设置的数据来渲染表格。2.新增数据（有未填项时提示）
javascript实现表格的上移下移删除
m0_60505147的博客
09-14 760
【代码】javascript实现表格的上移下移删除。
JS实现表格数据上移下移
m0_71959044的博客
02-19 615
JS实现表格数据上移下移
html动态表格删除行,用javascript实现表格增加，删除行
weixin_28607671的博客
06-09 341
new document window.onload = function(){// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。view();}function view(){var hang=document.getElementsByTagName("tr");for(var i=1;ihang[i].onmouseover=function (){t...
表格的增删改
05-14
用javascript编写显示表格的网页，表格可增加、删除行，且可修改表格内容，可点击表头进行排序，同时可以上移、下移行
editable_static_form.rar_html 增删改
09-21
此外，行列的上移和下移操作需要重新排序表格中的行。这通常涉及获取当前行的索引，根据移动方向调整索引，然后将行对象插入到新的位置。在操作过程中，需要注意保持数据与界面的一致性。 为了提高用户体验，我们...
js增删改案例
weixin_66602553的博客
04-10 256
订单增删改1.增加的方法2.删除的方法3.第一步：获取要操作的行id4.确认 今天给大家带来一个js的增删改的案例 1.增加的方法 第一步：获取要操作的表格id 第二步：根据表格id开始增加行 并且要传插入到指定的下标 第三步：给新增行设置id 第四步：给新增行添加单元格 第五步：给单元格赋值 代码如下： /* 增加订单方法 */ function f1(){ /* 要增加表格的编号 */ var a=document.getElementById("a"); /* 获取表格的总行数/最大下标 */
JQuery操作实现增删改查的详细介绍
zsl_955200的博客
12-16 1万+
JQuery操作实现增删改查的详细介绍 最近在写一个项目，让实现表格的增删改查功能，其实网上模块也很多，拿来用就可以了，我以前就是这样，想实现一个功能就去找度娘，然后拿来稍加修改就用了，但是这样的久了，技术都忘了，都不会自己写了，这次我就用纯鸡块实现了这样的一个功能，注释加的特别详细，以便以后回来看。
js表格行上移下移置顶置底
12-19
支持所有浏览器，包过IE6-8,支持多选行操作，支持不连续选择行表格操作，操作按钮单独分开的。
JS实现一个列表中包含上移下移删除等功能
10-25
一个项目，包括了一个列表页其中包括在列表中实现上移，下移，删除等功能，为了用户体验，操作均使用JS实现
js表格数据上移，下移功能
NIKCFNIF_66666的博客
10-07 291
【代码】js表格数据上移，下移功能。
js实现表格数据上移和下移
sober_girl的博客
04-13 1530
js实现表格数据上移和下移 上移 // row为移动的数组，idx:为上前移动的数据的索引 topMove(row,idx){ row[idx] = row.splice（idx -1 ,1,row）[0] } 下移 // row为移动的数组，idx:为上前移动的数据的索引 topMove(row,idx){ row[idx] = row.splice（idx + 1 ,1,row）[0] } 此处未考虑第一个数据上移和最后一个数据下移问题，大家自己转化即可。 ...
JavaScript_实现增删改操作（新增、删除、修改）
热门推荐
一只正在狂飙的肥兔
12-09 1万+
通过动态生成页面，以及事件委托、点击事件、循环遍历、数组等 js 基础知识实现新增、删除和修改的操作！
js操作表格操方法,增加,删除行，上移,下移一行选定行
蓝缘
04-09 9696
var mytable = null; window.onload = function () { mytable = new CTable("tbl", 10); //随机创建10行表格 } Array.prototype.each = function (f) { //数组的遍历 for
22-作业一：JS实现网页表格的增删改功能
DAIMAZHUANG的博客
09-19 428
js实现表格增删改
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值