关于对象循环遍历

最新推荐文章于 2024-04-23 19:45:00 发布
最新推荐文章于 2024-04-23 19:45:00 发布
阅读量412 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47764627/article/details/119849200
版权

1. for（var key in object ）{

}

2.创建不跳转链接

 td.innerHTML = "<a href='javascript:;'>删除</a>"

key得到的是属性名

obj[key] 这个才是属性值

3.下面我来写个单元格案例 （因为还不会数据库传值 所以先写到了js里面）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        table {

            width: 500px;

            margin: 100px auto;

            border-collapse: collapse;

            text-align: center;

        }

        td,

        th {

            border: 1px solid #333;

        }

        thead tr {

            height: 40px;

            background-color: #ccc;

        }

    </style>

</head>

<body>

    <table cellspacing="0">

        <thead>

            <tr>

                <th>姓名</th>

                <th>科目</th>

                <th>成绩</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

    </table>


 

    <script>

        //先去准备好学生的数据

        var datas = [{

            name: '魏璎珞',

            subject: 'JavaScript',

            score: 100

        }, {

            name: '弘历',

            subject: 'JavaScript',

            score: 98

        }, {

            name: '傅恒',

            subject: 'JavaScript',

            score: 99

        }, {

            name: '明玉',

            subject: 'JavaScript',

            score: 88

        }, {

            name: '大猪蹄子',

            subject: 'JavaScript',

            score: 0

        }];

        //2.创建行 有几个人头放多少行 数组的长度datas.length

        var tbody = document.querySelector("tbody")

        for (var i = 0; i < datas.length; i++) {//外面的循环负责行 

            //创建tr行

            var tr = document.createElement("tr")

            tbody.appendChild(tr)

            //1.该创建单元格td 把td放在行里面 也就是需要在加一层循环

            //2.td的个数就是对象里面的元素个数 所以我们现在要遍历对象

            for (var key in datas[i]) {

                var td = document.createElement("td")

                tr.appendChild(td)

                td.innerHTML = datas[i][key]

            }

            //3.创建有删除2字的单元格

            var td = document.createElement("td")

            tr.appendChild(td);

            td.innerHTML = "<a href='javascript:;'>删除</a>"



 

        }

        //4.删除操作

        var as = document.querySelectorAll("a")

        //开始给所有a创建点击删除事件

        for (var j = 0; j < as.length; j++) {


 

            as[j].addEventListener("click", fn)

            // 点击a删除 当前 a所在的 行 node.removeChild(child)

            function fn() {

                tbody.removeChild(this.parentNode.parentNode)

            }

        }
 

    </script>

 有什么问题欢迎下方留言

qq_47764627
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
for循环遍历
weixin_47244853的博客
06-07 2616
1、遍历循环 for (循环变量类型 循环变量名称；循环条件；更新语句) 循环体 String[] arr = { “a”, “b”, “c”, “d” }; for (int i = 0; i < arr.length; i++) { System.out.println(arr[i]); } 打印台 a b c d 2、迭代器循环 String[] arr = { “a”, “b”, “c”, “d” }; List list = Arrays.asList(arr); for (Iterator
for的循环遍历
热门推荐
N13China的博客
10-26 1万+
1.普通for循环遍历（fori） 写法：for（开始条件；结束条件；更改条件）{循环体} 如： 结果为： 2.增强/高效for循环遍历（for） 写法：for（1 2 ：3）{循环体} 其中1指的是本轮遍历得到的具体元素类型，2指的是遍历得到的元素的名字，3指的是要遍历的数据。 如： 结果为： 3.倒叙遍历（forr） 写法：for（开始条件；结束条件；更改条件）{循环体} 如： 结果为： 4.三种遍历的简便方法 1）普通for：变量...
对象的遍历方法
xiaokuangren_的博客
09-24 8693
第一种 for…in 循环遍历对象自身属性和继承的可枚举属性 代码如下 <script> let obj = { 0: "a", 1: "b", 3: "c" }; for (let key in obj) { console.log(key, ":", obj[key]); // 0 : a // 1 : b // 3 : c } </script> 第二种 Object.
JavaScript中数组、对象等循环遍历的常用方法介绍
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-29 4430
方法是否改变原数组特点forEach()否没有返回值map()否有返回值，可链式调用for of否for…of遍历具有Iterator迭代器的对象的属性，返回的是数组的元素、对象的属性值，不能遍历普通的obj对象，将异步循环变成同步循环filter()否过滤数组，返回包含符合条件的元素的数组，可链式调用否some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.否find()返回的是第一个符合条件的值；
JS中遍历对象的方法讲解
肥晨开发的学习之路
06-19 2755
Object.keys()和Object.getOwnPropertyNames()方法只会返回对象自身的属性（包括可枚举和不可枚举属性），而不会返回继承的属性。我们可以使用forEach()方法来遍历这个数组，并对每个属性进行操作。Object.entries(obj)会返回一个包含对象自身可枚举属性的键值对数组。我们可以使用forEach()方法来遍历这个数组，并对每个属性进行操作。对象的属性在内部存储时是没有固定顺序的，因此遍历顺序不一定与属性定义的顺序相同。
【JavaScript】对象 ⑤ ( 遍历对象 | for…in 循环 遍历对象 | Object.keys() 遍历对象 的 属性名称 | Object.entries() 遍历对象属性键值对 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-23 2067
一、遍历对象引入 1、对象遍历需求 2、遍历对象的常用方法 二、遍历对象 1、使用 for…in 循环 遍历对象 2、使用 Object.keys() 遍历对象 的 属性名称 3、使用 Object.values() 遍历对象 的 属性值 4、使用 Object.entries() 遍历对象 的 属性名称 + 属性值 键值对组合
JS中的18种相关循环遍历的方法
qq_33743799的博客
05-30 3358
js 循环遍历相关
jquery中object对象循环遍历的方法
11-23
一个朋友问对象如何转为数组，当我问他为啥要转得时候，他告诉我，数组可以用js循环遍历，而对象则不可以。其实呢，对象同样可以循环遍历的啊。不用转换也可以循环！说明你对js或者jquery的某些操作不是很熟练！在...
对python For 循环的三种遍历方式解析
09-19
第一种遍历方式是最直观的，即直接通过`for`循环遍历序列的每个元素。在给定的例子中，`for item in array:` 这一行代码会依次将数组`array`中的每个元素赋值给变量`item`，然后执行循环体内的语句。在`array = ["a...
js 遍历对象的属性的代码
10-28
首先，让我们看一个基本的`for...in`循环遍历对象属性的例子： ```javascript function CustomObject(name, value) { this.name = name || 'CustomeObject'; this.value = value || 0; this.toString = function...
JavaScript中利用for循环遍历数组
10-20
首先，让我们来看看`for`循环遍历数组的基本语法： ```javascript var arr = [3, 5, 2, 6]; for (var i = 0; i ; i++) { console.log(i, "类型：" + typeof i, arr[i]); } ``` 在这个例子中，`for`循环初始化了一...
js 对象循环遍历
weixin_43915401的博客
11-14 2813
可以使用break， continue，和正常for 循环一样。
js数组遍历方法总结
weixin_38897313的博客
05-01 722
数组遍历方法 1.for循环 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。 for(j = 0,len=arr.length; j < len; j++) { } 2.foreach循环 遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE //1 没有返回值 arr.forEach((item,index,array)=>...
JS数组、对象循环遍历方法
Better_Xing的博客
08-19 6271
JS数组、对象循环遍历方法
对象循环遍历
weixin_459417989的博客
02-18 1372
for(const key in text){ if(object.prototype.hasOwnProperty.call(text,key)&&typeof text[key]!=='undefined'){ const needobj = text[key] } }
js的循环遍历
weixin_42589161的博客
02-03 422
​​​​​​​js循环遍历
JavaScript：js数组/对象遍历方法
snowball的博客
06-03 5535
undefinedfor使用最基本的for循环可以遍历数组。for...of语句用来遍历可迭代对象（包括数组、Set、Map、字符串等），它可以替代传统的for循环和forEach方法。for...of循环每次迭代都将返回一个值，而不是索引。循环还可以遍历字符串，并且能够正确处理 Unicode 字符。需要注意的是:for...of 循环不能遍历普通对象，因为它们不是可迭代对象。对于普通对象，可以使用for...in循环来遍历对象的属性。
JS学习20：for..in 循环遍历对象
玉安_ZhangDe的博客
05-04 6625
在此之前我们对于for循环已经非常熟悉了，在此我就不多做赘述了。do-while循环也就比while循环多循环一轮。那 for .. in循环呢？ for...in 语句用于对数组或者对象的属性进行循环操作。 其语法如下： for (变量 in 对象名字) { // 在此执行代码 } 理解：for....in遍历，其实是在变量object对象中的所有属性key，然后我们可以根据key获取value属性值 var obj = { .
随笔吧
weixin_30569153的博客
09-21 311
1、for 循环 1 2 3 4 5 6 7 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 2 // 2 3 for 循环是 Js 中最常用的一个循环工具，...
循环遍历对象以及循环遍历对象中的数组
06-02
好的，您想了解如何循环遍历对象以及对象中的数组，我可以为您提供一些基本的代码示例。 首先，让我们看一下如何循环遍历一个对象： ```javascript const myObject = { name: "Alice", age: 30, occupation: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值