【Javascript】入门之操作表格属性(添加，删除，全选与反选)

最新推荐文章于 2024-01-13 01:00:00 发布
最新推荐文章于 2024-01-13 01:00:00 发布
阅读量681 收藏 5
点赞数
分类专栏： js交互设计 代码实例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086980/article/details/110542691
版权

描述: 点击添加, 输入框的值添加到下方表格中，点击删除按钮，删除所在行的所有内容

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格添加删除</title>
    <style>
        table{
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<script>
window.onload = function(){
    // 等页面及资源加载完成后再执行
    // 1. 获取元素 按钮 input table
    var btn = document.getElementsByTagName('button')[0];
    var inps = document.getElementsByTagName('input');
    var table = document.getElementsByTagName('table')[0];
    console.log(btn, inps, table);

    // 2.添加点击事件, 将输入框的值作为一行加入表格中
    btn.onclick = function(){
        // 2.1 获取输入框的值
        var name = inps[0].value;
        var gender = inps[1].value;
        var age = inps[2].value;
        // console.log(name, gender, age);

        // 3.创建行元素
        var tr = document.createElement('tr');
        // 获取行数
        var len = table.tBodies[0].rows.length;
        console.log(len);

        // 创建新元素
        tr.appendChild(createElement('td', len + 1));
        tr.appendChild(createElement('td', name));
        tr.appendChild(createElement('td', gender));
        tr.appendChild(createElement('td', age));
        tr.appendChild(createElement('td', '<button>删除</button>'))

        console.log(tr);

        // 新创建的tr添加到表格体中
        table.tBodies[0].appendChild(tr);

        // 给动态添加的动态按钮添加删除功能
        var del = tr.getElementsByTagName('button')[0];
        console.log(del);

        // 点击删除按钮, 删除整行
        del.onclick = function(){
            // 行和按钮是父子关系
            console.log(this.parentNode.parentNode);
            this.parentNode.parentNode.remove();
        }
    }

    // 给静态页面中的删除按钮添加事件
    var staticdel = table.getElementsByTagName('button');
    console.log(staticdel);

    // 给每一个删除按钮添加点击事件
    for(var i = 0; i<staticdel.length; i++){
        staticdel[i].onclick = function(){
            // 删除此行
            this.parentNode.parentNode.remove();
        }
    }

    // 函数封装---创建元素
    function createElement(ele, con){
        var newEle = document.createElement(ele);
        newEle.innerHTML = con;
        // 设置返回值
        return newEle;
    }
}
</script>
<body>
    <input type="text" placeholder="name" autocomplete="off">
    <input type="text" placeholder="gender" autocomplete="off">
    <input type="text" placeholder="age" autocomplete="off">
    <button>添加</button>
    <br>
    <table border='1' width="500">
        <tHead>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tHead>
        <!-- 无数个tBody  只有一个头和一个脚 -->
        <tBody>
            <tr>
                <td>1</td>
                <td>蔡文姬</td>
                <td>男</td>
                <td>3</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>亚索</td>
                <td>女</td>
                <td>38</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>Jack</td>
                <td>男</td>
                <td>23</td>
                <td><button>删除</button></td>
            </tr>
        </tBody>
    </table>
</body>
</html>

描述：全选按钮功能的实现与删除选中的行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格操作</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .mt12{
            margin-top: 12px;
        }
        button{
            outline: none;
            border: 1px solid #767676;
            border-radius: 3px;
            width: 83px;
            height: 23px;
            cursor: pointer; 
        }
        #wrap{
            width: 550px;
            height: 550px;
            /* background-color: cadetblue; */
            margin: 20px auto;
            overflow: hidden;
        }
        #wrap #inputpanel{
            width: 504px;
            height: 110px;
            border: 1px solid #eeeeee;
            border-radius: 5px;
            margin:18px 0 30px 8px;
            /* background-color: beige; */
            position: relative;
        }
        #wrap #inputpanel > p{
            margin-left: 10px;
            font: 16px/30px "微软雅黑";
        }
        #wrap #inputpanel > p > input{
            outline: none;
            text-indent: 5px;
        }
        #wrap #inputpanel > button{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #wrap #contentpanel{
            width: 504px;
            height: 100%;
            margin-left: 8px;
            /* border: 1px solid #333; */
        }
        #wrap #contentpanel > button{
            float: right;
            margin: 18px 10px 0 0;
        }
        table > tHead > tr > th > input,
        table > tBody > tr > td > input{
            width: 16px;
            height: 16px;
        }
        table > tBody > tr > td{
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<script>
    window.onload = function(){
        // 1.添加内容到新的行
        // 等待页面及资源加载完成后在执行
        /* 
            点击添加按钮, 将输入框的值作为一行加入表格中

            获取元素: 父元素面板 按钮  input table
        */
        var inputpanel = document.getElementById('inputpanel');
        var contentpanel = document.getElementById('contentpanel');
        // console.log(inputpanel, contentpanel);
        // 获取添加按钮, 输入框的值
        var addbtn = inputpanel.getElementsByTagName('button')[0];
        var inps = inputpanel.getElementsByTagName('input');
        // console.log(addbtn, inps);
        // 获取table
        var table = contentpanel.getElementsByTagName('table')[0];
        // console.log(table);

        // 获取全选按钮和其他所有复选框
        var allCheck = table.tHead.getElementsByTagName('input')[0];
        var check = table.tBodies[0].getElementsByTagName('input');
        // console.log(allCheck, check);

        // 获取删除按钮
        var delbtn = contentpanel.getElementsByTagName('button')[0];
        // console.log(delbtn);

        // 按钮添加点击事件, 将输入框的值作为一行加入表格中
        addbtn.onclick = function(){
            // 获取输入框的值
            var name = inps[0].value;
            var gender = inps[1].checked ? inps[1].value : inps[2].value;
            var age = inps[3].value;
            // console.log(name, gender, age);

            // 创建新的行元素
            var tr = document.createElement('tr');
            // 创建新的列元素并添加到行元素中
            tr.appendChild(createEle('td','<input type ="checkbox">'));
            tr.appendChild(createEle('td', name));
            tr.appendChild(createEle('td', gender));
            tr.appendChild(createEle('td', age));
            // 添加到表格体中
            table.tBodies[0].appendChild(tr);

            // 点击添加一行后, 全选按钮不能被选中
            allCheck.checked = false;

            // 添加的复选框获取事件
            var newCheck = tr.getElementsByTagName('input')[0];
            // console.log(newCheck);
            newCheck.onclick = function(){
                // 如果所有的复选按钮都被选中
                // 需要判断是否每一个按钮都被选中了
                isCheckAll();
            }
        }

        // 点击全选按钮, 如果按钮被选中, 表格体中的每一个复选框都被选中
        // 反之, 每一个复选框都不被选中
      
        // 全选按钮添加点击事件
        allCheck.onclick = function(){
            // console.log(allCheck.checked, check);
            // 所有普通checkbox与全选按钮一样
            for(var i = 0; i < check.length; i++){
                check[i].checked = allCheck.checked;
            }
        }

        // 点击每一个普通的复选按钮, 如果所有的复选按钮都被选中, 全选按钮就要被选中
        // 如果有一个复选按钮没有被选中, 全选按钮直接不被选中
        // 给每一个普通复选框添加点击事件
        for(var j = 0; j < check.length; j++){
            check[j].onclick = function(){
                // 如果所有的复选按钮都被选中
                // 需要判断是否每一个按钮都被选中了
                isCheckAll();
               
            }
        }

        // 函数---判断每一个复选框都被选中
        function isCheckAll(){
            for(var z = 0; z < check.length; z++){
                // console.log(check[z].checked);
                if(check[z].checked == false){
                    allCheck.checked = false;
                    return;
                }
            }
            // 如果整个for循环执行结束代码都没有终止, 则表示所有的按钮都被选中
            allCheck.checked = true;
        }

        // 删除所选行, 点击按钮, 将所选中的行删除
        delbtn.onclick = function(){
            // 判断每一条数据是不是被选中, 如果被选中, 则删除
            // console.log(check);
            for(var k = 0; k < check.length; k++){
                console.log(check[k].checked);
                if(check[k].checked == true){
                    // 移除所有
                    check[k].parentNode.parentNode.remove();
                    // 删除之后, 后面的元素向前进1, k需要多停留一次
                    k--;
                }
            }
            // 删除以后, 全选按钮不被选中
            allCheck.checked = false;
        }
        // 函数---创建元素
        function createEle(ele, con){
            // 创建新元素
            var newEle = document.createElement(ele);
            // 设置内容
            newEle.innerHTML = con;
            // 返回新设置的内容
            return newEle;
        }
    }
</script>
<body>
    <div id="wrap">
        <!-- input panel -->
        <div id="inputpanel">
            <p class="mt12">
                请输入姓名:
                <input type="text">
            </p>
            <p>
                <label for="male">
                    请输入性别:
                    <input type="radio" name="gender" id="male" value="男" checked>男
                </label>&nbsp;&nbsp;
                <label for="female">
                    <input type="radio" name="gender" id="female" value="女">女
                </label>
            </p>
            <p>
                请输入年龄:
                <input type="text">
            </p>
            <button>添加到表格</button>
        </div>

        <!-- table -->
        <div id="contentpanel">
            <table border="1" cellspacing = "0">
                <tHead>
                    <tr>
                        <th width = "100" height = "30">
                            <input type="checkbox">&nbsp;全选
                        </th>
                        <th width = "135" height = "30">姓名</th>
                        <th width = "135" height = "30">性别</th>
                        <th width = "135" height = "30">年龄</th>
                    </tr>
                </tHead>
                <tBody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>张无忌</td>
                        <td>男</td>
                        <td>26</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>楚雨荨</td>
                        <td>女</td>
                        <td>16</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>慕容云海</td>
                        <td>男</td>
                        <td>20</td>
                    </tr>
                </tBody>
            </table>
            <button>删除所选行</button>
        </div>
    </div>
</body>
</html>
夹心776655
关注
专栏目录
【前端学习】JavaScript绑定事件和移除绑定
Dog Sun的博客
02-04 184
文章目录·绑定事件·事件流程·Dom0级绑定·Dom2级绑定·IE中的高级绑定方式·移除绑定·移除DOM2级绑定·移除IE中绑定 ·绑定事件 ·事件流程 捕获: 事件从最顶层元素开始执行，一层一层往下，直到最精确的元素。 冒泡: 事件从最精确的元素开始执行，一层一层往上，直到最顶层元素。 ·Dom0级绑定 box.onclick = function() { console.log("DOM0"...
AvalonJs入门二 复选框全选反选+layui分页
Oracion_wj的博客
07-13 1516
今天给大家带来初识Avalon的第二篇文章，复选框的全选操作和Avalon+layUI的分页。
JavaScript---表单元素的属性操作
weixin_45904557的博客
05-05 1025
type,value,checked
怎样用js取得/设置表格的所有属性?
做最好的自己
09-04 5007
我看到有人用setAttrib()函数，具体怎么用？怎么取得/设置所选表格的所有属性setAttribute版本：DOM1　返回值：无语法：object . setAttribute ( sName , vValue , iFlags ) 参数：sName  :　 必选项。字符串(String)。指定属性的名称。 vValue  :　 必选项。要赋给属性的值。可以是任何需要的变量类型。 iFl
js 动态添加删除元素并获取值
l_baoge的博客
07-09 713
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
JavaScript入门
野尘
03-31 253
JavaScript入门 一、简介： 基于对象和事件驱动的脚本语言，应用于客户端。 —基于对象：提供好了对象，直接拿来使用，不需要new对象 —事件驱动：js提供动态效果，由事件来触发。 —客户端：浏览器 Java和JavaScript的区别： a. 二者无任何关系 b. Java是面向对象，js是基于对象 c. Java是基于虚拟机，js是基于浏览器 d. Java是强类型语言，js是弱类型语言...
document操作表格元素
wyqwilliam的博客
12-14 751
<html> <head> <title>js操作表格</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> table{ margin: auto; margin-top: 20px...
vue中实现二维数组的全选、全不选、反选、部分全选功能（图文示例）
最新发布
大剑师兰特的GIS世界
01-13 1248
根据vue项目的需求，需要做二维数组的全选、全不选、反选、部分全选功能。 怎么制作呢？ 全选、全不选很好处理，反选和部分全选处理起来麻烦一些，需要判断父级是否为选中状态。具体的代码请采纳考示例。
HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript
qq_365392777
09-29 3176
HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？ 2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初
js生成动态表格并为每个单元格添加单击事件的方法
10-26
主要介绍了使用javascript生成动态表格并为每个单元格添加单击事件,需要的朋友可以参考下
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
热门推荐
weixin_46065214的博客
08-17 1万+
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
html+java script实现表格添加删除编辑保存
weixin_66489187的博客
10-27 785
html+java script实现表格添加删除编辑保存
vue的视图化创建项目_进一步了解 Vue 在初始化视图时创建新文档的实现逻辑
weixin_39858132的博客
12-29 139
进一步了解 Vue 在初始化视图时创建新文档的实现逻辑发布于2020-10-16阅读714一、首先我们了解下， Vue 源码中创建新文档的函数是怎样的。二、初识源码后，如果带着疑惑，我们则还需理解以下几个知识点。1、document.createDocumentFragment描述：创建一个新的空白文档片段。文档片段存在于内存中，并不在 DOM 树中。通常的用法是：1、创建文档片段；2、将元素...
XML编程—CRUD
weixin_34356138的博客
02-06 102
XML编程——CRUD 一、 JAXP 简介 JAXP 使得用 Java 开发处理 XML 数据的应用程序非常容易，JAXP 包括语法分析器、标准 SAX与 DOM，可以选择以事件流或建立对象表示来解析数据。JAXP 1.1 版本还支持XSLT标准， 可以控制数据的表示， 并可以将数据转换成其他的XML文件或格式， 如HTML。JAXP 还提供对名称空间的支持，可以在没有命名冲突的情况下使用 ...
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
han_han__的博客
09-11 2686
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
JavaScript实现表格全选、全不选、反选
qq_41628448的博客
03-04 460
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> div{ text-align: center; ...
JavaScript中常见属性
xuekatie的博客
03-18 698
常用属性：id,className,value,style(background,color,width,height,cssText),innerHTml,href,src,tagName 1.href值和src值获取到的是绝对路径 2.style是行间属性（cssText会替换掉当前所有的行间属性） 3. class是关键字，的改成className来获取 4. tagname获取到的是大写字母 <!--className属性 --> <div id="box" class.
js如何操作表格（常用属性方法汇总）
weixin_33919941的博客
06-06 686
js如何操作表格（常用属性方法汇总） 一、总结 一句话总结：     二、表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组。 语法：tableObject.cells[] rows[] 返回包含表格中所有行的一个数组。 rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定...
JavaScript实现多选框全选与反选
"多选框全选反选的JavaScript实现" 在网页交互中，多选框（Checkbox）是常见的用户输入组件，常用于让用户选择多个选项。全选和反选功能可以方便用户快速勾选或取消所有选项，提高用户体验。本示例展示了如何使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值