// 操作标签的属性和属性值
        // 特殊的属性  
        // 可以直接通过 点语法或者[]语法来操作的属性
        // 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. P7177 [COCI2014-2015#4] MRAVI 题解

    思路. 我们知道最初添加的液体越多,那么每个蚂蚁得到的液体也就越多,又因为标签里有深搜,所以可以用 DFS+二分解决(感觉说了一通废话),算是比较常规的一种解法了. 在此题中我们需要魔改一下建树,需在 ...

  2. 一文搞懂 SAE 日志采集架构

    简介: 本文将着重介绍了 SAE 提供了多种日志采集方案,以及相关的架构,场景使用特点,点击下文,立即查看吧- 作者:牛通(奇卫)   日志,对于一个程序的重要程度不言而喻.无论是作为排查问题的手段, ...

  3. DTCC 2020 | 阿里云王涛：阿里巴巴电商数据库上云实践

    简介: 第十一届中国数据库技术大会(DTCC2020),在北京隆重召开.大会以"架构革新 高效可控"为主题,重点围绕数据架构.AI与大数据.传统企业数据库实践和国产开源数据库等内容 ...

  4. 如何快速调度 PTS 的百万并发能力

    ​简介:压测是通过模拟用户行为对业务系统发起请求,测算出系统的承载能力,并对系统做一次全面的体检,压测后可根据压测表现优化系统瓶颈,防止出现线上故障. 作者:灵苒 在实际的业务场景中,压测是必不可少的 ...

  5. Docker Volume 的经常用法区别

    对于使用 NFS 的 Docker 数据卷,配置示例应当类似于这样: version: '3' services: my_service: image: your_image volumes: # 挂 ...

  6. 2019-2-11-win10-uwp-安装文件-appinstaller-格式

    title author date CreateTime categories win10 uwp 安装文件 appinstaller 格式 lindexi 2019-02-11 08:55:31 + ...

  7. 使用sqlcmd命令行执行.sql文件

    用微软自带的sqlcmd命令行工具,可以执行导入.以SQL Server 2016版本为例: 第一步:Win+R 键入:cmd 命令,开启命令行工具: 第二步:键入:sqlcmd -S . -U sa ...

  8. 实验8 #第8章 Verilog有限状态机设计-1 #Verilog #Quartus #modelsim

    8-1 流水灯控制器 1. 实验要求:采用有限状态机设计彩灯控制器,控制LED灯实现预想的演示花型. 2. 实验内容: (1)功能:设计彩灯控制器,要求控制18个LED灯实现如下的演示花型: 从两边往 ...

  9. vue关于this.$refs.tabs.refreshs()刷新组件，缓存

    当更改了用户信息后,需要刷新页面或者组件. 1.当前组件刷新.定义一个请求用户信息的方法,在需要时调用: sessionStorage.setItem('userInfo',JSON.stringif ...

  10. 【HarmonyOS】安装DevEco Studio后检查环境出现ohpm not set up

    按照官网的操作方式,下载完ohpm总是检测不到 打开cmd,发现我之前因为其他项目改过编码 输入 regedit 打开注册表编辑页 按路径[计算机\HKEY_LOCAL_MACHINE\SOFTWAR ...