// 操作标签的属性和属性值
        // 特殊的属性  
        // 可以直接通过 点语法或者[]语法来操作的属性
        // 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. linux中nginx的https证书过期替换

    linux中nginx的https证书过期替换 工作记录,不然老是忘 一般提示这个就说明过期了 首先把新的证书换上去,最好和之前的文件名字一样,这样就不用改配置文件了 路径就自己找了需要,不过一般挺好 ...

  2. 力扣580(MySQL)-统计各专业人数（中等）

    题目: 一所大学有 2 个数据表,分别是 student 和 department ,这两个表保存着每个专业的学生数据和院系数据. 写一个查询语句,查询 department 表中每个专业的学生人数 ...

  3. 力扣522(java)-最长特殊序列Ⅱ（中等）

    题目: 给定字符串列表 strs ,返回 它们中 最长的特殊序列 .如果最长特殊序列不存在,返回 -1 . 最长特殊序列 定义如下:该序列为某字符串 独有的最长子序列(即不能是其他字符串的子序列). ...

  4. 力扣224(java)-基本计算器（困难）

    题目: 给你一个字符串表达式 s ,请你实现一个基本计算器来计算并返回它的值. 注意:不允许使用任何将字符串作为数学表达式计算的内置函数,比如 eval() . 示例 1: 输入:s = " ...

  5. HarmonyOS NEXT应用开发之异常处理案例

    介绍 本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法,主要分为应用崩溃.应用卡死以及系统查杀三种. 效果图预览 使用说明: 点击构建应用崩溃事件,3s之后应用退出,然后打 ...

  6. dotnet 读 WPF 源代码笔记 提升调试效率的 NamedObject 类型

    本文来聊聊 WPF 那些值得称赞的设计中的 NamedObject 类型.在 WPF 中,有很多值得我学习的设计开发思想,其中就包括本文将要介绍的 NamedObject 类型.此类型的定义仅仅只是为 ...

  7. 一步步教你在 Windows 上构建 dotnet 系应用的 UOS 软件安装包

    本文将详细指导大家如何逐步为 dotnet 系列应用创建满足 UOS 统信系统软件安装包的要求.在这里,我们所说的 dotnet 系列应用是指那些能够在 Linux 平台上构建 UI 框架的应用,包括 ...

  8. 纯css高斯背景模糊（毛玻璃，伪元素，完整实例）

    先上效果图: 写博客不管是做笔记还是干啥,直接上源码不行么,还不放效果图,拆分成几段谁慢慢看,慢慢理解去 自己动手,丰衣足食,上代码: <!DOCTYPE HTML> <html l ...

  9. Oracle、达梦：生成32位字符串（ID）

    15.生成32位字符串 达梦.oracle 函数:sys_guid().newid() 转小写LOWER(char) select rawtohex(sys_guid()); -- 推荐使用newid ...

  10. 从原始边列表到邻接矩阵Python实现图数据处理的完整指南

    本文分享自华为云社区<从原始边列表到邻接矩阵Python实现图数据处理的完整指南>,作者: 柠檬味拥抱. 在图论和网络分析中,图是一种非常重要的数据结构,它由节点(或顶点)和连接这些节点的 ...