m0_62600920 2024-07-07 10:24 采纳率: 1.1%
浏览 2

继续问刚才问题点击下拉菜单边框无法隐藏

我按您的要求修改代码后,运行时报错,原来我的程序是在input输入框里输入数字或文字能搜索到下拉菜单里的内容,现在已输入就报错,下拉菜单边框也隐藏不了,麻烦你仔细看看我原来写的代码,再给我建议好吗,


```javascript
<style type="text/css">              
        .table1{            
           width: 1000px;
           margin: 60px auto;           
           border-collapse: collapse;           
        }                             
        .itemtdkm{
            width: 210px;
            height: 62px;                       
            margin: 0px;  
            padding: 0px;   
        }                                       
        #charudivinput{
            display: none;
            position: absolute;
            z-index: 1;
        }
       #charudivbiaotou{
          display: none; 
          position: absolute;
          width: 240px;                   
          height: 25px;         
          z-index: 4;
          margin-top: 67px;
          border-top-style: none;
       }       
       #charudivbiaoti{          
          display: none;
          position: absolute; 
          width: 240px;                    
          overflow-y: scroll;          
          z-index: 2;
          margin-top: 92px;          
       }
       #charudiva{           
          position:fixed; 
          text-align: center;          
          height: 25px;          
          width: 240px;          
          z-index: 3;             
       }                           
    </style>     
<div id="blue" class="jzpzdiv" ></div>    
    <script language="javascript">          
        init();
        function init(){
            jzpzTable(4, 6);            
            initjzpz();                                                           
        }                     
        function jzpzTable(rowsLength, colLength){            
            var position = document.getElementById("blue");//定义table生成的位置                                      
            var objTable = document.createElement("table");
                objTable.className = 'table1';
                objTable.id = 'table1';                                               
                objdiv = document.createElement("div");
                objdiv.className = 'cjdiv';                                                    
            for(var i= 0; i < rowsLength; i++){            
                var objTr = document.createElement("tr");
                    objTr.className = "itemtr";                          
                tdLength = 5                               
                for(var j= 0; j < colLength - tdLength; j++){                                
                    var objTd = document.createElement("td");
                        objTd.id = "add";
                        objTd.className = 'itemtdkm'; 
                        objTd.style.border = '1px solid black';                                                              
                        objTd.innerHTML ="<div id='charudivinput'>" 
                        +'<input autocomplete="off"  type="text" id="myInput" onkeyup="myFunction()" oninput="handleInput(event)" placeholder="搜索... " class="jzpzinput1">'
                        + "</div>"+"<div id='charudivbiaotou'>"+'<table id="tab"  >' 
                                + '<tr class="tr1">'
                                +'<td class="quanbu" style="width: 48px;">全部</td>'
                                +'<td class="zichan" style="width: 48px;">资产</td>'
                                +'<td class="fuzhai" style="width: 48px; ">负债</td>'
                                +'<td class="quanyi" style="width: 48px;">权益</td>'
                                +'<td class="chengben" style="width: 48px;">成本</td>'
                                +'<td class="sunyi" style="width: 48px;">损益</td>'+
                                '</tr>'+'</table>'+"</div>"+"<div id='charudivbiaoti'>"+'<table id="tab1">'
                                +'<tr class="tr1">'
                                +'<td style="font-size: 14px; ">1001库存现金</td>'       
                                +'</tr>'
                                +'<tr class="tr1">'
                                +'<td style="font-size: 14px; ">100201农行</td>'                 
                                +'</tr>'                 
                                +'<tr class="tr1">'
                                +'<td style="font-size: 14px; ">1012其他货币资金</td>'      
                                +'</tr>'
                                +'<tr class="tr1">'
                                +'<td style="font-size: 14px; ">1001</td>'                   
                                +'</tr>'                                                                
                                +'<tr class="tr1">'
                                +'<td style="font-size: 14px; ">1001</td>'                  
                                +'</tr>'+'</table>'+"<div id='charudiva'>"+'<a href="javascript:;" id="charua">点击添加</a>'+"</div>"+"</div>";                                                                                    
                        objTr.appendChild(objTd);                                                                              
                }                                                       
                objdiv.appendChild(objTr);                                            
                objdiv1 = document.createElement("div");                                                               
            }            
            objTable.appendChild(objdiv);
            position.appendChild(objTable);                                                                                   
            console.log(position);                       
        }                                               
        function initjzpz(){                
            const table1  = document.getElementsByClassName('table1')[0]                                                            
                getitemtdkms = table1.getElementsByClassName('itemtdkm')                                                                                                                  
            function jzpzkm(){             
                for(let y = 0; y < getitemtdkms.length; y++){                                                                                      
                    getitemtdkm = getitemtdkms[y];
                    getitemtdkm.addEventListener('click',function(){
                        const  _self = this;
                        charudivinput = this.children[0]                                                                                                
                        oinput = this.children[0].children[0]
                        charudivbiaotou = this.children[1]
                        charudivbiaoti = this.children[2]
                        charudivbiaotitab = this.children[2].children[0]
                        charudiva = this.children[2].children[1]
                        charudivinput.style.display = "block"; 
                        charudivbiaotou.style.display = "block"
                        charudivbiaoti.style.display = "block"
                        oinput.style.width = "204px";
                        oinput.style.height = "62px";
                        charudivbiaotitab.style.maxHeight = "180px"
                        charudivbiaotitab.style.display = "block"
                        charudivbiaotou.style.border = "1px solid red"
                        charudivbiaotou.style.backgroundColor = "white"                        
                        charudivbiaoti.style.border = "1px solid red"
                        charudivbiaoti.style.backgroundColor = "white"                                                                                                                                             
                        charudiva.style.border = "1px solid red"
                        charudiva.style.backgroundColor = "white"                                                                                                                                                                                                                                                                                                         
                        function cell(){                                                                                                                                                                                           
                            rows = charudivbiaoti.getElementsByTagName('tr');                                                                                                                                                                     
                            for(i = 0; i < rows.length; i++){                                        
                                for(j=0; j<rows[i].cells.length; j++){                                               
                                    rows[i].cells[j].onclick = function(){                                                                     
                                        oinput.value = this.innerHTML;
                                        charudivbiaotou.style.border = "none"                                                                               
                                        charudivbiaotou.innerHTML = ""
                                        charudivbiaotou.style.backgroundColor = ""
                                        charudivbiaoti.style.border = "none"
                                        charudivbiaotitab.innerHTML = "" 
                                        charudivbiaoti.style.backgroundColor = ""
                                        charudiva.style.border = "none"
                                        charudiva.innerHTML = "" 
                                        charudiva.style.backgroundColor = "" 
                                        _self.style.border = "none"                                                                                                                                                                                                                                                                                                                           
                                    }
                                }                                    
                            }
                        }
                        cell();
                    })                    
                    getitemtdkm.onmouseout = function(){
                        this.children[0].children[0].placeholder = "";                                               
                    }                                                                                                                                                                                                                                                                                                                                                               
                }                                        
            }                                                                                                                                                                                                                                         
            jzpzkm();                                   
        }                                        
        function myFunction(){
            let table1 = document.getElementsByClassName('table1')[0]
                  getitemtdkms = table1.getElementsByClassName('itemtdkm')
            for(var y = 0; y < getitemtdkms.length; y++){                                                                                      
                getitemtdkm = getitemtdkms[y];
                oinput = getitemtdkm.children[0].children[0];                
                tab1 = getitemtdkm.children[2].children[0];                                
                var oinput, filter, table, tr, td, i;                                           
                filter = oinput.value.toUpperCase();                                                                                      
                tr = tab1.getElementsByTagName("tr");                                                                               
                for (i = 0; i < tr.length; i++) {
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";                            
                        } else {
                            tr[i].style.display = "none";
                        }
                    } 
                }
            }
        } 
        function handleInput(event){
            let table1 = document.getElementsByClassName('table1')[0]
                  getitemtdkms = table1.getElementsByClassName('itemtdkm')
            for(var y = 0; y < getitemtdkms.length; y++){                                                                                      
                getitemtdkm = getitemtdkms[y];
                charudivbiaotitab = getitemtdkm.children[2].children[0]; 
                const oinput = event.target;
                if(oinput.value){                    
                    charudivbiaotitab.style.height =""                    
                    charudivbiaotitab.style.maxHeight = "180px"                    
                }else {                    
                    charudivbiaotitab.style.maxHeight = "180px"
                    charudivbiaotitab.style.display ="block"
                }
            }
        }                                                                                                                                                                                                                                                  



```

  • 写回答

2条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-07-07 10:24
    关注

    引自免费微信小程序:皆我百晓生

    首先,我需要你确认一下你遇到的问题是什么,是点击下拉菜单边框无法隐藏的问题,还是运行时报错的问题?从你提供的代码中看,两者都有涉及。对于运行时报错的问题,我需要你提供具体的错误信息以便更好地帮助你解决问题。对于点击下拉菜单边框无法隐藏的问题,我可以尝试帮助你找出可能的原因和解决方案。

    关于你的代码,我发现了一些可能的问题和改进建议:

    1. init() 函数被调用了两次,可能会导致重复创建表格和其他元素,可能会造成运行时错误或不可预期的行为。你可能需要检查一下为什么这个函数会被调用两次,或者调整你的代码结构以避免这种情况。
    2. 在你的代码中,你在创建 DOM 元素并添加到文档中时,使用了很多次 document.getElementsByClassName() 方法。这是一个相当低效的方法,因为它需要遍历整个文档的所有元素来查找匹配的元素。当元素数量增加时,这可能会导致性能问题。更好的方式是使用 document.querySelector()document.querySelectorAll() 方法来获取特定的元素。这些方法在找到第一个匹配的元素后立即返回,不需要遍历整个文档。

    关于你的报错问题和点击下拉菜单边框无法隐藏的问题,我需要更多的信息来给出具体的解决方案。例如,你可以提供具体的报错信息或者描述一下你期望的行为和当前的行为差异。这样我才能更准确地找到问题并提供解决方案。同时,如果可能的话,你可以创建一个简单的示例来展示你的问题,这样我可以更直观地看到问题并给出解决方案。

    对于解决代码中的问题,你可以逐步检查每个函数,并确保它们在逻辑上都能正确执行。同时,确保你的代码没有语法错误或逻辑错误。使用浏览器的开发者工具(如Chrome的开发者工具)可以帮助你调试JavaScript代码并查看运行时错误。

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 7月7日