// 操作标签的属性和属性值
        // 特殊的属性  
        // 可以直接通过 点语法或者[]语法来操作的属性
        // 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. webpack中常见的Plugin？解决了什么问题？

    一.是什么 Plugin(Plug-in)是一种计算机应用程序,它和主应用程序互相交互,以提供特定的功能 是一种遵循一定规范的应用程序接口编写出来的程序,只能运行在程序规定的系统下,因为其需要调用原纯 ...

  2. 【git】ignore文件详解

    1.功能 可以指定git,对于某些文件或者文件夹不进行追踪记录,例如一些依赖或者编译中间文件等. 2.使用注意 2.1 对于已经有提交记录的文件 对于已经提交的文件,即使加入了ignore文件也会被g ...

  3. 为 Serverless Devs 插上 Terraform 的翅膀，解耦代码和基础设施，实现企业级多环境部署（下）

    简介: 在上篇<为 Serverless Devs 插上 Terraform 的翅膀,实现企业级多环境部署(上)>中,主要介绍了 Serverless Devs 多环境功能的使用,用户读完 ...

  4. PolarDB 并行查询的前世今生

    简介:本文会深入介绍PolarDB MySQL在并行查询这一企业级查询加速特性上做的技术探索.形态演进和相关组件的实现原理,所涉及功能随PolarDB MySQL 8.0.2版本上线. ​ 作者 | ...

  5. [FAQ] VsCode 同时多行编辑

      [多光标自定义编辑] 按住 alt 键,鼠标左键点击,出现多个光标. [批量选中匹配编辑] 鼠标选中字符,按快捷键 ctrl + shift + L,字符的右侧都出现光标,可同时编辑. Tool: ...

  6. [Py] Jupyter 写入和执行 python 文件

    以 %%writefile request.py 开头. 下面写 python 代码,然后 shift + enter 键,可以把 python 代码写入开头指定的文件中,没有则自动创建. 以 %ru ...

  7. JavaScript 如何实现一个响应式系统

    JavaScript 如何实现一个响应式系统 第一阶段目标 数据变化重新运行依赖数据的过程 第一阶段问题 如何知道数据发生了变化 如何知道哪些过程依赖了哪些数据 第一阶段问题的解决方案 我们可用参考现 ...

  8. 有意思！一个关于 Spring 历史的在线小游戏

    发现 Spring One 的官网上有个好玩的彩蛋,分享给大家! 进到Spring One的官网,可以看到右下角有个类似马里奥游戏中的金币图标. 点击该金币之后,会打开一个新的页面,进入下面这样一个名 ...

  9. Mybatis的逆向工程（generator）

    Tips:Mybatis generator官网 http://www.mybatis.org/generator/configreference/commentGenerator.html Myba ...

  10. 【Oracle】Oracle数据库多实例安装

    需求:因为需要从RAC的多实例迁移至单虚拟机的多实例.因此,简要概述一下,如何安装数据库的多实例. 不管是Oracle 11g还是10g的多实例,其基本思路都是一致的. 1.调用dbca 在root账 ...