// 操作标签的属性和属性值
        // 特殊的属性  
        // 可以直接通过 点语法或者[]语法来操作的属性
        // 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. C#微服务必学清单

    在 C# 领域,有一些不错的微服务书籍和开源框架,对于学习微服务相关知识非常有帮助.以下是一些建议您阅读的微服务书目和开源框架. 微服务书目: 1. <Building Microservice ...

  2. 【笔记】go语言--切片的操作

    go语言--切片的操作 接上篇切片的概念开始 //Slice添加元素 arr := [...]int{0,1,2,3,4,5,6,7} s1 := arr[2:6] s2 := s1[3:5]//[5 ...

  3. 力扣283(java)-移动零（简单）

    题目: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 请注意 ,必须在不复制数组的情况下原地对数组进行操作. 示例 1: 输入: nums = [0, ...

  4. 重度使用Flutter研发模式下的页面性能优化实践

    简介: 淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了.目前我们首页.详情.店铺.我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建.一旦Flutte ...

  5. 深入理解云计算OpenAPI体系

    ​简介: 就云计算的API来看,当前并没有类似POSIX这样的API标准,基本上各大厂商各自为政.当然,有一些业界主流标准例如OAS获得多数云厂商的支持,但云厂商本身的API却往往由于历史原因.技术路 ...

  6. 【人脸识别】OpenCV获取自己的图像

    思路:先获取10000张自己的图像,然后通过CNN神经网络进行学习. 第一步:先获取自己的脸的数据.如何做? 代码如下: import cv2 import os import sys import ...

  7. get pull报错 Please commit your changes or stash them before you merge

    当本地分支和远程修改了同一个文件代码,pull远程分支的代码的时候会出现文件冲突 出现这个错误 Please commit your changes or stash them before you ...

  8. css样式相关的惊艳的属性

    CSS gap 简写属性用于设置行与列之间的间隙(网格间距). 规范的早期版本将该属性命名为 grid-gap,且为了保持与旧网站的兼容性,浏览器仍然会接受 grid-gap 作为 gap 的别名. ...

  9. Vue3开发新范式，不用`ref/reactive`，不用`ref.value`

    什么是Cabloy-Front? Cabloy-Front 是一款支持 IOC 容器的 Vue3 框架.不用ref/reactive,不用ref.value,不用pinia 与UI库的配合 Cablo ...

  10. PageOffice 6 版本最简单的打开保存文件

    在OA办公.文档流转等各个Web系统中,实现最简单的打开编辑保存文件功能,调用PageOffice只需要几行代码就可以完成. 后端代码 在后端编写代码调用webOpen方法打开文件之前给SaveFil ...