当前位置：网站首页>JS native implementation for loop rendering array

JS native implementation for loop rendering array

2022-06-22 07:19:00 【Small orange table】

Realization effect :
Insert picture description here 

<!DOCTYPE html>
<html>
<title>js Native implementation for Loop render array </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];//  Selected array subscript  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]) {
       //  Array of value Equal to the value of the selected array , Then select the check box  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>
原网站

版权声明
本文为[Small orange table]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202220537296180.html

边栏推荐

猜你喜欢

随机推荐