js原生实现for循环渲染数组

最新推荐文章于 2024-03-28 21:30:12 发布

小橙几

最新推荐文章于 2024-03-28 21:30:12 发布

阅读量3.8k

点赞数 1

分类专栏：学习笔记笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42174938/article/details/122047294

版权

学习笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

笔记

7 篇文章 0 订阅

订阅专栏

实现效果:
在这里插入图片描述

<!DOCTYPE html>
<html>
<title>js原生实现for循环渲染数组</title>
<head>
<style type="text/css">
#wrapper {
    background-color: pink;
}
#wrapper .row {
    border: 1px solid #000;
}
.row div{
    border: 1px solid #000;
    display: inline;
}
</style>        
</head>
<body>
    <div id="wrapper"></div>
</body>
<script>
function doJsFor() {
    var checkedArray = [0,2];// 选中的数组下标
    var someArray = [
            {name:'dream',value:0},
            {name:'prescription',value:1},
            {name:'tribe',value:2},
        ]
    var elementArray = [];
    for(let i=0;i<someArray.length; i++){
        var isChecked = false
        var isChecked = ''
        for(let j=0;j<checkedArray.length; j++){
            if(someArray[i].value=== checkedArray[j]) { // 数组的value等于选中数组的值,则选中复选框
                isChecked = true
            }
        }
        str = `<div class="row" ><div><input type="checkbox" ${isChecked?'checked':''} name="vehicle" value="${someArray[i].value}" /></div> <span>${someArray[i].name}</span> </div>`;
        elementArray.push(str)
    }
    document.getElementById("wrapper").innerHTML = elementArray.join('')
}
doJsFor();
</script>
</html>

小橙几

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
js原生实现for循环渲染数组

<!DOCTYPE html><html><title>js原生实现for循环渲染数组</title><head><style type="text/css">#wrapper { background-color: pink;}#wrapper .row { border: 1px solid #000;}.row div{ border: 1px solid #000; displa
复制链接

扫一扫

专栏目录