2021-01-02 JavaScriptの例と解釈:検証コードを送信し、検索、検索、インターレースの変色、修正

 function setYzm(){
     
	  	var yzmCode = String(Math.random()).slice(2,8)     //  6    0.1213232323
	  	console.log(yzmCode)
	  	yzm.value = yzmCode	//         
	  	//  ：      innerHTML  form  （input textarea select checkbox radio）  .value 
	  	setYzmBtn.disabled = true //    
	  	setYzmBtn.style.background = 'gray'	//     
	  	var i = 4	//   4    
	  	setYzmBtn.innerHTML = 5	//     5
	  	var time = null	//    
	  	
	  	time = setInterval(function(){
     		//     ，         －1
	  		setYzmBtn.innerHTML = i		//      
	  		if(i == 0){
     		//   0 ，        ，    
	  			setYzmBtn.disabled = false //  
	  			setYzmBtn.innerHTML = '     '
	  			setYzmBtn.style.background = '#FF0000'
	  			clearInterval(time)  //          
	  		}else{
     
	  			i--
	  		}
	  		
	  	},1000)

	  }

//  1：    tr   tr      td                        
	function findFun(){
     
		var trs = document.querySelectorAll('tbody>tr')
		for(var i=0;i<trs.length;i++){
     
			trs[i].style.background = ''
			//trs[i].children[1].innerText      myfind.value
			if(trs[i].children[1].innerText.indexOf(myfind.value) > -1){
     
				trs[i].style.background = 'red'
			}
		}
	}

//  2：   
  function searchFun(){
     
    	var myarr = arr.filter(function(item,index){
     
    		return item.des.includes(mysearch.value)
    	})
    	showFun(myarr)
    }

  //  ：        class  hover             class
	   var isb = true   //         
	   function openBg(){
     	//         
	   	 var trs = document.querySelectorAll('tbody>tr')
	   	   if(isb){
     		//           ，         ，     false
	   	 	  for(var i=0;i<trs.length;i++){
     
		   	 	//trs[i].setAttribute('class','myTrBg')
		   	 	kqghbs.innerHTML = '      '
		   	 	if(i % 2 == 0){
      //   
		   	 		trs[i].setAttribute('class','bg1')
		   	 	}else{
     
		   	 		trs[i].setAttribute('class','bg2')
		   	 	}
		   	 	isb = false
		   	  }
		   	}else{
     	//           ，     ，    ，    true
		   	  for(var i=0;i<trs.length;i++){
     
		   	 	trs[i].removeAttribute('class')
		   	 	kqghbs.innerHTML = '      '
		   	 	isb = true
		   	  }
		   	}
	   }

 var updateId = ''		//         id
        //  
        function updatefun(id){
     		//          id  ，          ，        
        	arr.forEach(function(item,index){
     
        		if(item.id == id){
      //  
        			updateId = id
    				mysrc.value = item.imgsrc
		        	mydes.value = item.des
		        	myprice.value = item.price
		        	mytype.value = item.type
        		} 
        	})
        }
        //    
        function sureFun(){
     	//           id ，            id 
			arr.forEach(function(item,index){
     
				if(item.id == updateId){
     
					item.imgsrc = mysrc.value
					item.des = mydes.value
					item.price = myprice.value
					item.type = mytype.value
				}
			})
			setLocal(arr)		//         
			showFun(arr)
        }