// 操作标签的属性和属性值
        // 特殊的属性  
        // 可以直接通过 点语法或者[]语法来操作的属性
        // id 和 class 
        // 标签.id        可以操作设定 id属性和属性值
        // 标签.className 可以操作设定 class属性和属性值
        // 直接写是获取,带有赋值的是设定
        // 标签对象.id           标签对象.className          获取属性值
        // 标签对象.id = 赋值    标签对象.className = 赋值    设定属性值
 

        // 所有属性都可以使用的操作方式
        // 获取属性值 : getAttribute('属性')
        // 设定属性值 : setAttribute('属性' , '属性值')
        // 设定标签对象属性值
        // 标签对象.setAttribute('属性' , '属性值')
        // 获取标签对象属性
        // 标签对象.getAttribute('属性')
 
<body>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>地址</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody class="t1"></tbody>
    </table>
    <script src="./tools.js"></script>
    <script>
        // 根据从数据库获取的数据,生成table表格
        // 数值中存储对象来模拟数据库数据
        // 删除思路:
        // 1,在生成table表格中,在循环之后,再新增一个删除的单元格
        //   内容 是 td 中 嵌套 button 标签
        //   需要给button标签添加 属性 , 属性值是生成这行数据的对象,在数组中的索引下标
        //   目标是点击标签时,可以获取到要删除的数据,在数组中的索引下标
        // 2,获取所有的button标签按钮
        //   通过循环遍历,给button标签按钮,添加删除效果
        //   点击标签时,获取点击标签index属性的属性值
        //   也就是要删除的数据,也就是对象在数组中的索引下标
        //   根据这个索引下标,在数组中删除数据
        // 3,生成table表格的函数
        // 4,
        var arr = [
            { id: 1, name: '张三', age: 18, sex: '男', addr: '北京' },
            { id: 2, name: '李四', age: 17, sex: '女', addr: '上海' },
            { id: 3, name: '王五', age: 16, sex: '保密', addr: '广州' },
            { id: 4, name: '赵六', age: 15, sex: '男', addr: '重庆' },
            { id: 5, name: '刘七', age: 14, sex: '女', addr: '天津' },
        ];
        var oTbody = document.querySelector('.t1');
        // 不同页面,不同程序
        // 数组的名称,可能不同,写入标签的对象,名称也可能不同
        // 不能修改外部文件中的函数,其中定义的程序
        // 必须以参数的形式输入数组和需要写入内容的标签名称
        // 在文件中只调用一次 setTable()
        // 其他程序都是定义在外部js文件中
        setTable(arr , oTbody);
    </script>
</body>
 
// 参数有两个
// 参数1 : 数组   生成table表格使用的数组
// 参数2 : 对象   写入字符串的标签对象
function setTable(array , element){
    // 定义一个空字符串,存储数组生成的字符串
    var str = '';
    // 循环遍历数组,这个数据是外部输入的实参数组
    // v 存储的是数组的数据,也就是对象
    // k 存储的是数组的索引下标
    array.forEach(function (v, k) {
        // 拼接tr标签的起始标签
        str += '<tr>';
        // 循环遍历 对象 生成 td 单元格 单元格的内容,就是对象的属性值
        // key中存储的就是对象v中的属性,v[key]就是调用属性值
        for (var key in v) {
            // 拼接td单元格,单元格内容就是对象的属性值
            str += `<td>${v[key]}</td>`;
        }
        // 拼接删除单元格
        // td中嵌套button按钮标签,给button按钮添加属性,属性值是对象的索引下标
        // 执行删除时,根据索引下标,删除数组中的数据单元
        str += `<td><button index="${k}">删除</button></td>`;
        // 拼接tr标签的结束标签
        str += '</tr>';
    });
    // 将拼接好的字符串内容,写入到指定的标签对象中
    // 执行函数时,输入的第二个实参
    element.innerHTML = str;
    // 一旦生成table表格,就给table表格中的button按钮绑定删除效果
    // 获取button按钮标签对象
    var oBtns = document.querySelectorAll('button');
    // 执行给button按钮绑定点击事件,执行删除数据效果的函数
    
    setButton(oBtns , array , element);
}
// 参数1 : 绑定点击事件的button标签对象,是一个伪数组
// 这两个参数,是 setTable() 需要的两个参数
// 参数2 : 数值 , 生成table表格使用的数组
// 参数3 : 对象   写入字符串的标签对象
function setButton(eleArr , array , element){
    eleArr.forEach(function (item) {
        item.onclick = function () {
            var index = item.getAttribute('index');
            array.splice(index, 1);
            setTable(array,element);
        }
    })
}
 
 

操作标签的属性和属性值 table表格的更多相关文章

  1. 13-4 jquery操作标签（文本，属性，class,value）

    一 文本操作 $().html() $().text() 文本赋值操作 $().html("") $().text("") 二 属性操作 $().attr(属性 ...

  2. jQuery操作标签--样式、文本、属性操作, 文档处理

    1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...

  3. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  4. jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

    jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...

  5. table表格标签的属性

    table标签目前前端主流推荐HTML.CSS.JS三者分离,实际使用table标签的CSS样式代码还是采用table的style的属性和值来进行外观样式控制. 习惯样式: 1 table { 2 d ...

  6. 随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值

    随手记一次用C#正则表达式获取下拉菜单html标签<select>以及相关属性值 1:有如下html: .................. <select id="aaa ...

  7. 获取label标签内for的属性值-js

    <body> <div class="row_2" id="ass"> <label for="aaa"> ...

  8. spring:使用<prop>标签为Java持久属性集注入值

    spring:使用<prop>标签为Java持久属性集注入值 使用 spring 提供的<prop>为Java持久属性集注入值,也就是向 java.util.Propertie ...

  9. Html标签<a>的target属性

    target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...

  10. html对a标签的运用以及属性，img图像标签的属性及应用

    今天学习的难点自我感觉在于a标签超链接的应用.不是很熟练,晚上回家准备敲敲代码,让a的超链接标签使用的更加熟练,对于上午的img 属性值已经明白 . 还是日常记一下每日的重点   a标签去下划线:a{ ...

随机推荐

  1. ORA-29277:invalid SMTP operation

    ORA-29277:invalid SMTP operation 邮件发送的时候出现报错 ORA-29277:invalid SMTP operation 官方解释就很简单 但是实际上重试是不行的,几 ...

  2. 【Oracle】Oracle常用分析函数（排名）

    Oracle常用分析函数(排名) 一般来说,遇到需要对数据进行排序的时候,可以使用分析函数,一般常用的有三个,rank,dense_rank,row_number --Oracle常用分析函数(排名) ...

  3. 力扣74(java&python)-搜索二维矩阵（中等）

    题目: 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列.每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入:matri ...

  4. TairSearch：加速多列索引查询

    简介: 互联网及传统行业应用服务的关键数据一般存储在MySQL这类的关系型数据库中.如需缓解数据库访问压力,可引入Redis等缓存系统承担热数据的查询,以此提升查询效能.然而业务场景如果是在数据库上做 ...

  5. 【OpenYurt 深度解析】边缘网关缓存能力的优雅实现

    简介: 阿里云边缘容器服务上线 1 年后,正式开源了云原生边缘计算解决方案 OpenYurt,跟其他开源的容器化边缘计算方案不同的地方在于:OpenYurt 秉持 Extending your nat ...

  6. 深信服智能边缘计算平台与 OpenYurt 落地方案探索与实践

    ​简介:本文将介绍边缘计算落地的机遇与挑战,以及边缘容器开源项目 OpenYurt 在企业生产环境下的实践方案. 作者:赵震,深信服云计算开发工程师,OpenYurt 社区 Member 编者案:在 ...

  7. Forrester云原生开发者洞察白皮书，低代码概念缔造者又提出新的开发范式

    简介: 云原生时代的到来为开发者群体带来了前所未有的机遇,让开发者可以更加专注业务价值创造与创新,并使得人人成为开发者成为现实.广大开发者如何转型成为云原生开发者?运维等专业人员在云原生时代如何避免边 ...

  8. [Py] Python dict 倒序操作

    倒序操作很简单,使用 reversed( ) 方法,原本是 ['a', 'b', 'c'],倒序后就是 ['c', 'b', 'a'] Ref:在线运行Python代码 Refer:Python di ...

  9. 最强AI直播换脸软件，DeepFaceLive下载介绍

    DeepFaceLive是一款专注于直播实时换脸的AI软件,使用经过长时间训练的人脸模型替换摄像头中的人脸,能够产生接近电影质量的面部合成效果,提供高保真的视觉体验,在新版本中也支持了图片换脸(视频换 ...

  10. JUC并发编程学习笔记（十八）深入理解CAS

    深入理解CAS 什么是CAS 为什么要学CAS:大厂你必须深入研究底层!有所突破! java层面的cas------->compareAndSet compareAndSet(int expec ...